diff --git a/.github/workflows/unit_tests.yml b/.github/workflows/unit_tests.yml
index 33e9421b4..879f8b83b 100644
--- a/.github/workflows/unit_tests.yml
+++ b/.github/workflows/unit_tests.yml
@@ -36,7 +36,8 @@ jobs:
         uses: gradle/gradle-build-action@v2.6.1
         with:
           cache-read-only: ${{ github.ref != 'refs/heads/develop' }}
-
+      - name: Generate mock files
+        run: ./gradlew generateMockedRawFile
       - name: Run unit tests
         run: ./gradlew testProdReleaseUnitTest $CI_GRADLE_ARG_PROPERTIES
 
diff --git a/.gitignore b/.gitignore
index a66b3739e..1cc8ec083 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,5 @@
 .cxx
 local.properties
 /.idea/
-*.log
\ No newline at end of file
+*.log
+/config_settings.yaml
diff --git a/README.md b/README.md
index 5c09e9f90..1d4039253 100644
--- a/README.md
+++ b/README.md
@@ -5,26 +5,29 @@ Modern vision of the mobile application for the Open EdX platform from Raccoon G
 [Documentation](Documentation/Documentation.md)
 
 ## Building
+
 1. Check out the source code:
 
-        git clone https://github.com/raccoongang/educationx-app-ios.git
+        git clone https://github.com/openedx/openedx-app-android.git
 
 2. Open Android Studio and choose Open an Existing Android Studio Project.
 
-3. Choose ``educationx-app-android``.
+3. Choose ``openedx-app-android``.
 
-4. Configure the [config.yaml](config.yaml) with URLs and OAuth credentials for your Open edX instance.
+4. Configure the [config.yaml](default_config/dev/config.yaml) with URLs and OAuth credentials for your Open edX instance.
 
 5. Select the build variant ``develop``, ``stage``, or ``prod``.
 
 6. Click the **Run** button.
 
 ## API plugin
+
 This project uses custom APIs to improve performance and reduce the number of requests to the server.
 
 You can find the plugin with the API and installation guide [here](https://github.com/raccoongang/mobile-api-extensions).
 
 ## License
+
 The code in this repository is licensed under the Apache-2.0 license unless otherwise noted.
 
-Please see [LICENSE](https://github.com/raccoongang/educationx-app-android/blob/main/LICENSE) file for details.
+Please see [LICENSE](https://github.com/openedx/openedx-app-android/blob/main/LICENSE) file for details.
diff --git a/app/build.gradle b/app/build.gradle
index 831c836b8..a0f268eb6 100644
--- a/app/build.gradle
+++ b/app/build.gradle
@@ -3,18 +3,22 @@ plugins {
     id 'org.jetbrains.kotlin.android'
     id 'kotlin-parcelize'
     id 'kotlin-kapt'
-    id "com.google.firebase.crashlytics"
+    id 'com.google.firebase.crashlytics'
 }
 
+def config = configHelper.fetchConfig()
+def appId = config.getOrDefault("APPLICATION_ID", "org.openedx.app")
+def platformName = config.getOrDefault("PLATFORM_NAME", "OpenEdx").toLowerCase()
+
 android {
     compileSdk 34
 
     defaultConfig {
-        applicationId "org.openedx.app"
+        applicationId appId
         minSdk 24
         targetSdk 34
         versionCode 1
-        versionName "1.0"
+        versionName "1.0.0"
 
         resourceConfigurations += ["en", "uk"]
 
@@ -36,10 +40,26 @@ android {
         }
     }
 
+    sourceSets {
+        prod {
+            res.srcDirs = ["src/$platformName/res"]
+        }
+        develop {
+            res.srcDirs = ["src/$platformName/res"]
+        }
+        stage {
+            res.srcDirs = ["src/$platformName/res"]
+        }
+    }
+
     buildTypes {
         release {
             minifyEnabled true
             proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+
+            firebaseCrashlytics {
+                mappingFileUploadEnabled false
+            }
         }
     }
     compileOptions {
@@ -80,6 +100,7 @@ dependencies {
     implementation project(path: ':discovery')
     implementation project(path: ':profile')
     implementation project(path: ':discussion')
+    implementation project(path: ':whatsnew')
 
     kapt "androidx.room:room-compiler:$room_version"
 
diff --git a/app/proguard-rules.pro b/app/proguard-rules.pro
index 49a1005fc..dc403e8f7 100644
--- a/app/proguard-rules.pro
+++ b/app/proguard-rules.pro
@@ -74,7 +74,7 @@
 #-keep class com.google.gson.stream.** { *; }
 
 # Application classes that will be serialized/deserialized over Gson
--keep class com.google.gson.examples.android.model.** { <fields>; }
+-keep class org.openedx.*.data.model.** { <fields>; }
 
 # Prevent proguard from stripping interface information from TypeAdapter, TypeAdapterFactory,
 # JsonSerializer, JsonDeserializer instances (so they can be used in @JsonAdapter)
@@ -93,3 +93,19 @@
 -keep,allowobfuscation,allowshrinking class * extends com.google.gson.reflect.TypeToken
 
 ##---------------End: proguard configuration for Gson  ----------
+
+-keepclassmembers class * extends java.lang.Enum {
+    <fields>;
+    public static **[] values();
+    public static ** valueOf(java.lang.String);
+}
+
+-dontwarn org.bouncycastle.jsse.BCSSLParameters
+-dontwarn org.bouncycastle.jsse.BCSSLSocket
+-dontwarn org.bouncycastle.jsse.provider.BouncyCastleJsseProvider
+-dontwarn org.conscrypt.Conscrypt$Version
+-dontwarn org.conscrypt.Conscrypt
+-dontwarn org.conscrypt.ConscryptHostnameVerifier
+-dontwarn org.openjsse.javax.net.ssl.SSLParameters
+-dontwarn org.openjsse.javax.net.ssl.SSLSocket
+-dontwarn org.openjsse.net.ssl.OpenJSSE
\ No newline at end of file
diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
index 086cf5a34..b5581c340 100644
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@@ -4,6 +4,7 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_DATA_SYNC" />
 
     <queries>
         <intent>
@@ -15,11 +16,13 @@
         android:name=".OpenEdXApp"
         android:allowBackup="false"
         android:dataExtractionRules="@xml/data_extraction_rules"
+        android:enableOnBackInvokedCallback="true"
         android:fullBackupContent="@xml/backup_rules"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:localeConfig="@xml/locales_config"
         android:roundIcon="@mipmap/ic_launcher_round"
+        android:screenOrientation="sensor"
         android:supportsRtl="true"
         android:theme="@style/Theme.App.Starting"
         tools:targetApi="tiramisu">
@@ -27,7 +30,6 @@
             android:name=".AppActivity"
             android:exported="true"
             android:fitsSystemWindows="true"
-            android:screenOrientation="portrait"
             android:theme="@style/Theme.App.Starting"
             android:windowSoftInputMode="adjustPan">
             <intent-filter>
@@ -47,10 +49,20 @@
                 android:resource="@xml/file_provider_paths" />
         </provider>
 
-        <provider android:authorities="${applicationId}.firebaseinitprovider"
+        <provider
             android:name="com.google.firebase.provider.FirebaseInitProvider"
+            android:authorities="${applicationId}.firebaseinitprovider"
             android:exported="false"
-            tools:node="remove"/>
+            tools:node="remove" />
+
+        <meta-data
+            android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
+            android:value="androidx.media3.cast.DefaultCastOptionsProvider" />
+
+        <service
+            android:name="androidx.work.impl.foreground.SystemForegroundService"
+            android:foregroundServiceType="dataSync"
+            tools:node="merge" />
     </application>
 
-</manifest>
\ No newline at end of file
+</manifest>
diff --git a/app/src/main/java/org/openedx/app/AnalyticsManager.kt b/app/src/main/java/org/openedx/app/AnalyticsManager.kt
index 0efcb7d54..4f152677c 100644
--- a/app/src/main/java/org/openedx/app/AnalyticsManager.kt
+++ b/app/src/main/java/org/openedx/app/AnalyticsManager.kt
@@ -3,25 +3,45 @@ package org.openedx.app
 import android.content.Context
 import android.os.Bundle
 import androidx.core.os.bundleOf
-import com.google.firebase.analytics.FirebaseAnalytics
+import org.openedx.app.analytics.Analytics
+import org.openedx.app.analytics.FirebaseAnalytics
 import org.openedx.auth.presentation.AuthAnalytics
+import org.openedx.core.config.Config
 import org.openedx.course.presentation.CourseAnalytics
-import org.openedx.dashboard.presentation.DashboardAnalytics
+import org.openedx.dashboard.presentation.dashboard.DashboardAnalytics
 import org.openedx.discovery.presentation.DiscoveryAnalytics
 import org.openedx.discussion.presentation.DiscussionAnalytics
 import org.openedx.profile.presentation.ProfileAnalytics
 
-class AnalyticsManager(context: Context) : DashboardAnalytics, AuthAnalytics, AppAnalytics,
+class AnalyticsManager(
+    context: Context,
+    config: Config,
+) : DashboardAnalytics, AuthAnalytics, AppAnalytics,
     DiscoveryAnalytics, ProfileAnalytics, CourseAnalytics, DiscussionAnalytics {
 
-    private val analytics = FirebaseAnalytics.getInstance(context)
+    private val services: ArrayList<Analytics> = arrayListOf()
+
+    init {
+        // Initialise all the analytics libraries here
+        if (config.getFirebaseConfig().projectId.isNotEmpty()) {
+            addAnalyticsTracker(FirebaseAnalytics(context = context))
+        }
+    }
+
+    private fun addAnalyticsTracker(analytic: Analytics) {
+        services.add(analytic)
+    }
 
     private fun logEvent(event: Event, params: Bundle = bundleOf()) {
-        analytics.logEvent(event.eventName, params)
+        services.forEach { analytics ->
+            analytics.logEvent(event.eventName, params)
+        }
     }
 
     private fun setUserId(userId: Long) {
-        analytics.setUserId(userId.toString())
+        services.forEach { analytics ->
+            analytics.logUserId(userId)
+        }
     }
 
     override fun dashboardCourseClickedEvent(courseId: String, courseName: String) {
@@ -143,10 +163,22 @@ class AnalyticsManager(context: Context) : DashboardAnalytics, AuthAnalytics, Ap
         logEvent(Event.PRIVACY_POLICY_CLICKED)
     }
 
+    override fun termsOfUseClickedEvent() {
+        logEvent(Event.TERMS_OF_USE_CLICKED)
+    }
+
     override fun cookiePolicyClickedEvent() {
         logEvent(Event.COOKIE_POLICY_CLICKED)
     }
 
+    override fun dataSellClickedEvent() {
+        logEvent(Event.DATE_SELL_CLICKED)
+    }
+
+    override fun faqClickedEvent() {
+        logEvent(Event.FAQ_CLICKED)
+    }
+
     override fun emailSupportClickedEvent() {
         logEvent(Event.EMAIL_SUPPORT_CLICKED)
     }
@@ -320,6 +352,15 @@ class AnalyticsManager(context: Context) : DashboardAnalytics, AuthAnalytics, Ap
         )
     }
 
+    override fun datesTabClickedEvent(courseId: String, courseName: String) {
+        logEvent(
+            Event.DATES_TAB_CLICKED, bundleOf(
+                Key.COURSE_ID.keyName to courseId,
+                Key.COURSE_NAME.keyName to courseName
+            )
+        )
+    }
+
     override fun handoutsTabClickedEvent(courseId: String, courseName: String) {
         logEvent(
             Event.HANDOUTS_TAB_CLICKED, bundleOf(
@@ -386,7 +427,10 @@ private enum class Event(val eventName: String) {
     PROFILE_DELETE_ACCOUNT_CLICKED("Profile_Delete_Account_Clicked"),
     PROFILE_VIDEO_SETTINGS_CLICKED("Profile_Video_settings_Clicked"),
     PRIVACY_POLICY_CLICKED("Privacy_Policy_Clicked"),
+    TERMS_OF_USE_CLICKED("Terms_Of_Use_Clicked"),
     COOKIE_POLICY_CLICKED("Cookie_Policy_Clicked"),
+    DATE_SELL_CLICKED("Data_Sell_Clicked"),
+    FAQ_CLICKED("FAQ_Clicked"),
     EMAIL_SUPPORT_CLICKED("Email_Support_Clicked"),
     COURSE_ENROLL_CLICKED("Course_Enroll_Clicked"),
     COURSE_ENROLL_SUCCESS("Course_Enroll_Success"),
@@ -402,6 +446,7 @@ private enum class Event(val eventName: String) {
     COURSE_TAB_CLICKED("Course_Outline_Course_tab_Clicked"),
     VIDEO_TAB_CLICKED("Course_Outline_Videos_tab_Clicked"),
     DISCUSSION_TAB_CLICKED("Course_Outline_Discussion_tab_Clicked"),
+    DATES_TAB_CLICKED("Course_Outline_Dates_tab_Clicked"),
     HANDOUTS_TAB_CLICKED("Course_Outline_Handouts_tab_Clicked"),
     DISCUSSION_ALL_POSTS_CLICKED("Discussion_All_Posts_Clicked"),
     DISCUSSION_FOLLOWING_CLICKED("Discussion_Following_Clicked"),
diff --git a/app/src/main/java/org/openedx/app/AppActivity.kt b/app/src/main/java/org/openedx/app/AppActivity.kt
index 67981f548..8646c7491 100644
--- a/app/src/main/java/org/openedx/app/AppActivity.kt
+++ b/app/src/main/java/org/openedx/app/AppActivity.kt
@@ -1,6 +1,5 @@
 package org.openedx.app
 
-import android.content.pm.ActivityInfo
 import android.content.res.Configuration
 import android.graphics.Color
 import android.os.Bundle
@@ -11,47 +10,51 @@ import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
 import androidx.core.view.WindowInsetsControllerCompat
+import androidx.fragment.app.Fragment
 import androidx.window.layout.WindowMetricsCalculator
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.app.databinding.ActivityAppBinding
+import org.openedx.auth.presentation.logistration.LogistrationFragment
 import org.openedx.auth.presentation.signin.SignInFragment
+import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.extension.requestApplyInsetsWhenAttached
-import org.openedx.core.presentation.global.AppData
-import org.openedx.core.presentation.global.AppDataHolder
 import org.openedx.core.presentation.global.InsetHolder
 import org.openedx.core.presentation.global.WindowSizeHolder
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
 import org.openedx.profile.presentation.ProfileRouter
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.openedx.app.databinding.ActivityAppBinding
-import org.openedx.core.data.storage.CorePreferences
+import org.openedx.whatsnew.WhatsNewManager
+import org.openedx.whatsnew.presentation.whatsnew.WhatsNewFragment
 
-class AppActivity : AppCompatActivity(), InsetHolder, WindowSizeHolder, AppDataHolder {
+class AppActivity : AppCompatActivity(), InsetHolder, WindowSizeHolder {
 
     override val topInset: Int
         get() = _insetTop
     override val bottomInset: Int
         get() = _insetBottom
+    override val cutoutInset: Int
+        get() = _insetCutout
 
     override val windowSize: WindowSize
         get() = _windowSize
 
-    override val appData: AppData
-        get() = AppData(BuildConfig.VERSION_NAME)
-
     private lateinit var binding: ActivityAppBinding
-    private val preferencesManager by inject<CorePreferences>()
     private val viewModel by viewModel<AppViewModel>()
+    private val whatsNewManager by inject<WhatsNewManager>()
+    private val corePreferencesManager by inject<CorePreferences>()
     private val profileRouter by inject<ProfileRouter>()
 
     private var _insetTop = 0
     private var _insetBottom = 0
+    private var _insetCutout = 0
 
     private var _windowSize = WindowSize(WindowType.Compact, WindowType.Compact)
 
     override fun onSaveInstanceState(outState: Bundle) {
         outState.putInt(TOP_INSET, topInset)
         outState.putInt(BOTTOM_INSET, bottomInset)
+        outState.putInt(CUTOUT_INSET, cutoutInset)
         super.onSaveInstanceState(outState)
     }
 
@@ -74,6 +77,7 @@ class AppActivity : AppCompatActivity(), InsetHolder, WindowSizeHolder, AppDataH
         if (savedInstanceState != null) {
             _insetTop = savedInstanceState.getInt(TOP_INSET, 0)
             _insetBottom = savedInstanceState.getInt(BOTTOM_INSET, 0)
+            _insetCutout = savedInstanceState.getInt(CUTOUT_INSET, 0)
         }
 
         window.apply {
@@ -93,60 +97,71 @@ class AppActivity : AppCompatActivity(), InsetHolder, WindowSizeHolder, AppDataH
             _insetTop = insetsCompat.top
             _insetBottom = insetsCompat.bottom
 
+            val displayCutout = WindowInsetsCompat.toWindowInsetsCompat(insets).displayCutout
+            if (displayCutout != null) {
+                val top = displayCutout.safeInsetTop
+                val left = displayCutout.safeInsetLeft
+                val right = displayCutout.safeInsetRight
+                _insetCutout = maxOf(top, left, right)
+            }
+
             insets
         }
         binding.root.requestApplyInsetsWhenAttached()
 
         if (savedInstanceState == null) {
-            if (preferencesManager.user != null) {
-                supportFragmentManager.beginTransaction()
-                    .add(R.id.container, MainFragment())
-                    .commit()
-            } else {
-                supportFragmentManager.beginTransaction()
-                    .add(R.id.container, SignInFragment())
-                    .commit()
+            when {
+                corePreferencesManager.user == null -> {
+                    if (viewModel.isLogistrationEnabled) {
+                        addFragment(LogistrationFragment())
+                    } else {
+                        addFragment(SignInFragment())
+                    }
+                }
+
+                whatsNewManager.shouldShowWhatsNew() -> {
+                    addFragment(WhatsNewFragment.newInstance())
+                }
+
+                corePreferencesManager.user != null -> {
+                    addFragment(MainFragment.newInstance())
+                }
             }
         }
 
         viewModel.logoutUser.observe(this) {
-            profileRouter.restartApp(supportFragmentManager)
+            profileRouter.restartApp(supportFragmentManager, viewModel.isLogistrationEnabled)
         }
     }
 
+    private fun addFragment(fragment: Fragment) {
+        supportFragmentManager.beginTransaction()
+            .add(R.id.container, fragment)
+            .commit()
+    }
+
     private fun computeWindowSizeClasses() {
         val metrics = WindowMetricsCalculator.getOrCreate()
             .computeCurrentWindowMetrics(this)
 
-        val widthDp = metrics.bounds.width() /
-                resources.displayMetrics.density
+        val widthDp = metrics.bounds.width() / resources.displayMetrics.density
         val widthWindowSize = when {
             widthDp < 600f -> WindowType.Compact
             widthDp < 840f -> WindowType.Medium
             else -> WindowType.Expanded
         }
 
-        val heightDp = metrics.bounds.height() /
-                resources.displayMetrics.density
+        val heightDp = metrics.bounds.height() / resources.displayMetrics.density
         val heightWindowSize = when {
             heightDp < 480f -> WindowType.Compact
             heightDp < 900f -> WindowType.Medium
             else -> WindowType.Expanded
         }
         _windowSize = WindowSize(widthWindowSize, heightWindowSize)
-        requestedOrientation =
-            if (widthWindowSize != WindowType.Compact && heightWindowSize != WindowType.Compact) {
-                ActivityInfo.SCREEN_ORIENTATION_SENSOR
-            } else if (requestedOrientation == ActivityInfo.SCREEN_ORIENTATION_SENSOR) {
-                ActivityInfo.SCREEN_ORIENTATION_SENSOR
-            } else {
-                ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
-            }
     }
 
     private fun isUsingNightModeResources(): Boolean {
-        return when (resources.configuration.uiMode and
-                Configuration.UI_MODE_NIGHT_MASK) {
+        return when (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
             Configuration.UI_MODE_NIGHT_YES -> true
             Configuration.UI_MODE_NIGHT_NO -> false
             Configuration.UI_MODE_NIGHT_UNDEFINED -> false
@@ -157,5 +172,6 @@ class AppActivity : AppCompatActivity(), InsetHolder, WindowSizeHolder, AppDataH
     companion object {
         const val TOP_INSET = "topInset"
         const val BOTTOM_INSET = "bottomInset"
+        const val CUTOUT_INSET = "cutoutInset"
     }
 }
diff --git a/app/src/main/java/org/openedx/app/AppRouter.kt b/app/src/main/java/org/openedx/app/AppRouter.kt
index ea24e9d7b..15f7be5a0 100644
--- a/app/src/main/java/org/openedx/app/AppRouter.kt
+++ b/app/src/main/java/org/openedx/app/AppRouter.kt
@@ -4,26 +4,31 @@ import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
 import androidx.fragment.app.FragmentTransaction
 import org.openedx.auth.presentation.AuthRouter
+import org.openedx.auth.presentation.logistration.LogistrationFragment
 import org.openedx.auth.presentation.restore.RestorePasswordFragment
 import org.openedx.auth.presentation.signin.SignInFragment
 import org.openedx.auth.presentation.signup.SignUpFragment
 import org.openedx.core.FragmentViewType
-import org.openedx.profile.domain.model.Account
-import org.openedx.core.domain.model.CoursewareAccess
 import org.openedx.core.presentation.course.CourseViewMode
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRouter
+import org.openedx.core.presentation.global.app_upgrade.UpgradeRequiredFragment
+import org.openedx.core.presentation.global.webview.WebContentFragment
 import org.openedx.course.presentation.CourseRouter
 import org.openedx.course.presentation.container.CourseContainerFragment
 import org.openedx.course.presentation.container.NoAccessCourseContainerFragment
 import org.openedx.course.presentation.detail.CourseDetailsFragment
 import org.openedx.course.presentation.handouts.HandoutsType
-import org.openedx.course.presentation.handouts.WebViewFragment
-import org.openedx.discovery.presentation.search.CourseSearchFragment
+import org.openedx.course.presentation.handouts.HandoutsWebViewFragment
+import org.openedx.course.presentation.info.CourseInfoFragment
 import org.openedx.course.presentation.section.CourseSectionFragment
 import org.openedx.course.presentation.unit.container.CourseUnitContainerFragment
 import org.openedx.course.presentation.unit.video.VideoFullScreenFragment
 import org.openedx.course.presentation.unit.video.YoutubeVideoFullScreenFragment
 import org.openedx.dashboard.presentation.DashboardRouter
+import org.openedx.dashboard.presentation.program.ProgramFragment
 import org.openedx.discovery.presentation.DiscoveryRouter
+import org.openedx.discovery.presentation.NativeDiscoveryFragment
+import org.openedx.discovery.presentation.search.CourseSearchFragment
 import org.openedx.discussion.domain.model.DiscussionComment
 import org.openedx.discussion.domain.model.Thread
 import org.openedx.discussion.presentation.DiscussionRouter
@@ -32,31 +37,63 @@ import org.openedx.discussion.presentation.responses.DiscussionResponsesFragment
 import org.openedx.discussion.presentation.search.DiscussionSearchThreadFragment
 import org.openedx.discussion.presentation.threads.DiscussionAddThreadFragment
 import org.openedx.discussion.presentation.threads.DiscussionThreadsFragment
+import org.openedx.profile.domain.model.Account
 import org.openedx.profile.presentation.ProfileRouter
+import org.openedx.profile.presentation.anothers_account.AnothersProfileFragment
 import org.openedx.profile.presentation.delete.DeleteProfileFragment
 import org.openedx.profile.presentation.edit.EditProfileFragment
+import org.openedx.profile.presentation.profile.ProfileFragment
 import org.openedx.profile.presentation.settings.video.VideoQualityFragment
 import org.openedx.profile.presentation.settings.video.VideoSettingsFragment
-import java.util.*
+import org.openedx.whatsnew.WhatsNewRouter
+import org.openedx.whatsnew.presentation.whatsnew.WhatsNewFragment
 
 class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, DiscussionRouter,
-    ProfileRouter {
+    ProfileRouter, AppUpgradeRouter, WhatsNewRouter {
 
     //region AuthRouter
-    override fun navigateToMain(fm: FragmentManager) {
+    override fun navigateToMain(fm: FragmentManager, courseId: String?) {
         fm.popBackStack()
         fm.beginTransaction()
-            .replace(R.id.container, MainFragment())
+            .replace(R.id.container, MainFragment.newInstance(courseId))
             .commit()
     }
 
-    override fun navigateToSignUp(fm: FragmentManager) {
-        replaceFragmentWithBackStack(fm, SignUpFragment())
+    override fun navigateToSignIn(fm: FragmentManager, courseId: String?) {
+        replaceFragmentWithBackStack(fm, SignInFragment.newInstance(courseId))
+    }
+
+    override fun navigateToSignUp(fm: FragmentManager, courseId: String?) {
+        replaceFragmentWithBackStack(fm, SignUpFragment.newInstance(courseId))
+    }
+
+    override fun navigateToLogistration(fm: FragmentManager, courseId: String?) {
+        replaceFragmentWithBackStack(fm, LogistrationFragment.newInstance(courseId))
     }
 
     override fun navigateToRestorePassword(fm: FragmentManager) {
         replaceFragmentWithBackStack(fm, RestorePasswordFragment())
     }
+
+    override fun navigateToDiscoverCourses(fm: FragmentManager, querySearch: String) {
+        replaceFragmentWithBackStack(fm, NativeDiscoveryFragment.newInstance(querySearch))
+    }
+
+    override fun navigateToWhatsNew(fm: FragmentManager, courseId: String?) {
+        fm.popBackStack()
+        fm.beginTransaction()
+            .replace(R.id.container, WhatsNewFragment.newInstance(courseId))
+            .commit()
+    }
+
+    override fun clearBackStack(fm: FragmentManager) {
+        fm.apply {
+            for (fragment in fragments) {
+                beginTransaction().remove(fragment).commit()
+            }
+            popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE)
+        }
+    }
     //endregion
 
     //region DiscoveryRouter
@@ -64,8 +101,20 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
         replaceFragmentWithBackStack(fm, CourseDetailsFragment.newInstance(courseId))
     }
 
-    override fun navigateToCourseSearch(fm: FragmentManager) {
-        replaceFragmentWithBackStack(fm, CourseSearchFragment())
+    override fun navigateToCourseSearch(fm: FragmentManager, querySearch: String) {
+        replaceFragmentWithBackStack(fm, CourseSearchFragment.newInstance(querySearch))
+    }
+
+    override fun navigateToUpgradeRequired(fm: FragmentManager) {
+        replaceFragmentWithBackStack(fm, UpgradeRequiredFragment())
+    }
+
+    override fun navigateToCourseInfo(
+        fm: FragmentManager,
+        courseId: String,
+        infoType: String,
+    ) {
+        replaceFragmentWithBackStack(fm, CourseInfoFragment.newInstance(courseId, infoType))
     }
     //endregion
 
@@ -82,13 +131,15 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
         )
     }
 
+    override fun navigateToProgramInfo(fm: FragmentManager, pathId: String) {
+        replaceFragmentWithBackStack(fm, ProgramFragment.newInstance(pathId))
+    }
+
     override fun navigateToNoAccess(
         fm: FragmentManager,
-        title: String,
-        coursewareAccess: CoursewareAccess,
-        auditAccessExpires: Date?
+        title: String
     ) {
-        replaceFragment(fm, NoAccessCourseContainerFragment.newInstance(title,coursewareAccess, auditAccessExpires))
+        replaceFragment(fm, NoAccessCourseContainerFragment.newInstance(title))
     }
     //endregion
 
@@ -97,39 +148,56 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
     override fun navigateToCourseSubsections(
         fm: FragmentManager,
         courseId: String,
-        blockId: String,
-        title: String,
-        mode: CourseViewMode,
+        subSectionId: String,
+        unitId: String,
+        componentId: String,
+        mode: CourseViewMode
     ) {
         replaceFragmentWithBackStack(
             fm,
-            CourseSectionFragment.newInstance(courseId, blockId, title, mode)
+            CourseSectionFragment.newInstance(
+                courseId = courseId,
+                subSectionId = subSectionId,
+                unitId = unitId,
+                componentId = componentId,
+                mode = mode
+            )
         )
     }
 
     override fun navigateToCourseContainer(
         fm: FragmentManager,
-        blockId: String,
         courseId: String,
-        courseName: String,
+        unitId: String,
+        componentId: String,
         mode: CourseViewMode
     ) {
         replaceFragmentWithBackStack(
             fm,
-            CourseUnitContainerFragment.newInstance(blockId, courseId, courseName, mode)
+            CourseUnitContainerFragment.newInstance(
+                courseId = courseId,
+                unitId = unitId,
+                componentId = componentId,
+                mode = mode
+            )
         )
     }
 
     override fun replaceCourseContainer(
         fm: FragmentManager,
-        blockId: String,
         courseId: String,
-        courseName: String,
+        unitId: String,
+        componentId: String,
         mode: CourseViewMode
     ) {
         replaceFragment(
             fm,
-            CourseUnitContainerFragment.newInstance(blockId, courseId, courseName, mode),
+            CourseUnitContainerFragment.newInstance(
+                courseId = courseId,
+                unitId = unitId,
+                componentId = componentId,
+                mode = mode
+            ),
             FragmentTransaction.TRANSIT_FRAGMENT_FADE
         )
     }
@@ -139,11 +207,12 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
         videoUrl: String,
         videoTime: Long,
         blockId: String,
-        courseId: String
+        courseId: String,
+        isPlaying: Boolean
     ) {
         replaceFragmentWithBackStack(
             fm,
-            VideoFullScreenFragment.newInstance(videoUrl, videoTime, blockId, courseId)
+            VideoFullScreenFragment.newInstance(videoUrl, videoTime, blockId, courseId, isPlaying)
         )
     }
 
@@ -152,11 +221,18 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
         videoUrl: String,
         videoTime: Long,
         blockId: String,
-        courseId: String
+        courseId: String,
+        isPlaying: Boolean
     ) {
         replaceFragmentWithBackStack(
             fm,
-            YoutubeVideoFullScreenFragment.newInstance(videoUrl, videoTime, blockId, courseId)
+            YoutubeVideoFullScreenFragment.newInstance(
+                videoUrl,
+                videoTime,
+                blockId,
+                courseId,
+                isPlaying
+            )
         )
     }
 
@@ -168,7 +244,7 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
     ) {
         replaceFragmentWithBackStack(
             fm,
-            WebViewFragment.newInstance(title, type.name, courseId)
+            HandoutsWebViewFragment.newInstance(title, type.name, courseId)
         )
     }
     //endregion
@@ -223,6 +299,16 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
             DiscussionSearchThreadFragment.newInstance(courseId)
         )
     }
+
+    override fun navigateToAnothersProfile(
+        fm: FragmentManager,
+        username: String
+    ) {
+        replaceFragmentWithBackStack(
+            fm,
+            AnothersProfileFragment.newInstance(username)
+        )
+    }
     //endregion
 
     //region ProfileRouter
@@ -242,14 +328,21 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
         replaceFragmentWithBackStack(fm, DeleteProfileFragment())
     }
 
-    override fun restartApp(fm: FragmentManager) {
+    override fun navigateToWebContent(fm: FragmentManager, title: String, url: String) {
+        replaceFragmentWithBackStack(
+            fm,
+            WebContentFragment.newInstance(title = title, url = url)
+        )
+    }
+
+    override fun restartApp(fm: FragmentManager, isLogistrationEnabled: Boolean) {
         fm.apply {
-            for (fragment in fragments) {
-                beginTransaction().remove(fragment).commit()
+            clearBackStack(this)
+            if (isLogistrationEnabled) {
+                replaceFragment(fm, LogistrationFragment())
+            } else {
+                replaceFragment(fm, SignInFragment())
             }
-            popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE)
-            beginTransaction().replace(R.id.container, SignInFragment())
-                .commit()
         }
     }
     //endregion
@@ -261,10 +354,22 @@ class AppRouter : AuthRouter, DiscoveryRouter, DashboardRouter, CourseRouter, Di
             .commit()
     }
 
-    private fun replaceFragment(fm: FragmentManager, fragment: Fragment, transaction: Int = FragmentTransaction.TRANSIT_NONE) {
+    private fun replaceFragment(
+        fm: FragmentManager,
+        fragment: Fragment,
+        transaction: Int = FragmentTransaction.TRANSIT_NONE
+    ) {
         fm.beginTransaction()
             .setTransition(transaction)
             .replace(R.id.container, fragment, fragment.javaClass.simpleName)
             .commit()
     }
-}
\ No newline at end of file
+
+    //App upgrade
+    override fun navigateToUserProfile(fm: FragmentManager) {
+        fm.popBackStack()
+        fm.beginTransaction()
+            .replace(R.id.container, ProfileFragment())
+            .commit()
+    }
+}
diff --git a/app/src/main/java/org/openedx/app/AppViewModel.kt b/app/src/main/java/org/openedx/app/AppViewModel.kt
index 002e0bd96..9092f603c 100644
--- a/app/src/main/java/org/openedx/app/AppViewModel.kt
+++ b/app/src/main/java/org/openedx/app/AppViewModel.kt
@@ -4,16 +4,18 @@ import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.viewModelScope
 import androidx.room.RoomDatabase
-import org.openedx.core.BaseViewModel
-import org.openedx.core.SingleEventLiveData
-import org.openedx.app.system.notifier.AppNotifier
-import org.openedx.app.system.notifier.LogoutEvent
 import kotlinx.coroutines.CoroutineDispatcher
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
+import org.openedx.app.system.notifier.AppNotifier
+import org.openedx.app.system.notifier.LogoutEvent
+import org.openedx.core.BaseViewModel
+import org.openedx.core.SingleEventLiveData
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
 
 class AppViewModel(
+    private val config: Config,
     private val notifier: AppNotifier,
     private val room: RoomDatabase,
     private val preferencesManager: CorePreferences,
@@ -21,9 +23,11 @@ class AppViewModel(
     private val analytics: AppAnalytics
 ) : BaseViewModel() {
 
+    private val _logoutUser = SingleEventLiveData<Unit>()
     val logoutUser: LiveData<Unit>
         get() = _logoutUser
-    private val _logoutUser = SingleEventLiveData<Unit>()
+
+    val isLogistrationEnabled get() = config.isPreLoginExperienceEnabled()
 
     private var logoutHandledAt: Long = 0
 
diff --git a/app/src/main/java/org/openedx/app/MainFragment.kt b/app/src/main/java/org/openedx/app/MainFragment.kt
index 9152a0023..2021e038f 100644
--- a/app/src/main/java/org/openedx/app/MainFragment.kt
+++ b/app/src/main/java/org/openedx/app/MainFragment.kt
@@ -2,23 +2,43 @@ package org.openedx.app
 
 import android.os.Bundle
 import android.view.View
-import androidx.viewpager2.widget.ViewPager2
+import androidx.core.os.bundleOf
+import androidx.core.view.forEach
 import androidx.fragment.app.Fragment
-import org.openedx.core.presentation.global.viewBinding
-import org.openedx.dashboard.presentation.DashboardFragment
-import org.openedx.discovery.presentation.DiscoveryFragment
-import org.openedx.app.adapter.MainNavigationFragmentAdapter
-import org.openedx.profile.presentation.profile.ProfileFragment
+import androidx.fragment.app.setFragmentResultListener
+import androidx.lifecycle.lifecycleScope
+import androidx.viewpager2.widget.ViewPager2
+import kotlinx.coroutines.launch
 import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.app.adapter.MainNavigationFragmentAdapter
 import org.openedx.app.databinding.FragmentMainBinding
+import org.openedx.core.presentation.global.app_upgrade.UpgradeRequiredFragment
+import org.openedx.core.presentation.global.viewBinding
+import org.openedx.dashboard.presentation.dashboard.DashboardFragment
+import org.openedx.dashboard.presentation.program.ProgramFragment
+import org.openedx.discovery.presentation.DiscoveryNavigator
+import org.openedx.discovery.presentation.DiscoveryRouter
+import org.openedx.profile.presentation.profile.ProfileFragment
 
 class MainFragment : Fragment(R.layout.fragment_main) {
 
     private val binding by viewBinding(FragmentMainBinding::bind)
     private val analytics by inject<AppAnalytics>()
+    private val viewModel by viewModel<MainViewModel>()
+    private val router by inject<DiscoveryRouter>()
 
     private lateinit var adapter: MainNavigationFragmentAdapter
 
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        lifecycle.addObserver(viewModel)
+        setFragmentResultListener(UpgradeRequiredFragment.REQUEST_KEY) { _, _ ->
+            binding.bottomNavView.selectedItemId = R.id.fragmentProfile
+            viewModel.enableBottomBar(false)
+        }
+    }
+
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
@@ -30,14 +50,17 @@ class MainFragment : Fragment(R.layout.fragment_main) {
                     analytics.discoveryTabClickedEvent()
                     binding.viewPager.setCurrentItem(0, false)
                 }
+
                 R.id.fragmentDashboard -> {
                     analytics.dashboardTabClickedEvent()
                     binding.viewPager.setCurrentItem(1, false)
                 }
+
                 R.id.fragmentPrograms -> {
                     analytics.programsTabClickedEvent()
                     binding.viewPager.setCurrentItem(2, false)
                 }
+
                 R.id.fragmentProfile -> {
                     analytics.profileTabClickedEvent()
                     binding.viewPager.setCurrentItem(3, false)
@@ -45,18 +68,65 @@ class MainFragment : Fragment(R.layout.fragment_main) {
             }
             true
         }
+
+        viewModel.isBottomBarEnabled.observe(viewLifecycleOwner) { isBottomBarEnabled ->
+            enableBottomBar(isBottomBarEnabled)
+        }
+
+        viewLifecycleOwner.lifecycleScope.launch {
+            viewModel.navigateToDiscovery.collect { shouldNavigateToDiscovery ->
+                if (shouldNavigateToDiscovery) {
+                    binding.bottomNavView.selectedItemId = R.id.fragmentHome
+                }
+            }
+        }
+
+        requireArguments().apply {
+            this.getString(ARG_COURSE_ID, null)?.let {
+                if (it.isNotBlank()) {
+                    router.navigateToCourseDetail(parentFragmentManager, it)
+                }
+            }
+            this.putString(ARG_COURSE_ID, null)
+        }
     }
 
     private fun initViewPager() {
         binding.viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
         binding.viewPager.offscreenPageLimit = 4
+
+        val discoveryFragment = DiscoveryNavigator(viewModel.isDiscoveryTypeWebView)
+            .getDiscoveryFragment()
+        val programFragment = if (viewModel.isProgramTypeWebView) {
+            ProgramFragment(true)
+        } else {
+            InDevelopmentFragment()
+        }
+
         adapter = MainNavigationFragmentAdapter(this).apply {
-            addFragment(DiscoveryFragment())
+            addFragment(discoveryFragment)
             addFragment(DashboardFragment())
-            addFragment(InDevelopmentFragment())
+            addFragment(programFragment)
             addFragment(ProfileFragment())
         }
         binding.viewPager.adapter = adapter
         binding.viewPager.isUserInputEnabled = false
     }
-}
\ No newline at end of file
+
+    private fun enableBottomBar(enable: Boolean) {
+        binding.bottomNavView.menu.forEach {
+            it.isEnabled = enable
+        }
+    }
+
+    companion object {
+        private const val ARG_COURSE_ID = "courseId"
+        fun newInstance(courseId: String? = null): MainFragment {
+            val fragment = MainFragment()
+            fragment.arguments = bundleOf(
+                ARG_COURSE_ID to courseId
+            )
+            return fragment
+        }
+    }
+}
diff --git a/app/src/main/java/org/openedx/app/MainViewModel.kt b/app/src/main/java/org/openedx/app/MainViewModel.kt
new file mode 100644
index 000000000..3b36cc2be
--- /dev/null
+++ b/app/src/main/java/org/openedx/app/MainViewModel.kt
@@ -0,0 +1,47 @@
+package org.openedx.app
+
+import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.SharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.onEach
+import org.openedx.core.BaseViewModel
+import org.openedx.core.config.Config
+import org.openedx.dashboard.notifier.DashboardEvent
+import org.openedx.dashboard.notifier.DashboardNotifier
+
+class MainViewModel(
+    private val config: Config,
+    private val notifier: DashboardNotifier,
+) : BaseViewModel() {
+
+    private val _isBottomBarEnabled = MutableLiveData(true)
+    val isBottomBarEnabled: LiveData<Boolean>
+        get() = _isBottomBarEnabled
+
+    private val _navigateToDiscovery = MutableSharedFlow<Boolean>()
+    val navigateToDiscovery: SharedFlow<Boolean>
+        get() = _navigateToDiscovery.asSharedFlow()
+
+    val isDiscoveryTypeWebView get() = config.getDiscoveryConfig().isViewTypeWebView()
+
+    val isProgramTypeWebView get() = config.getProgramConfig().isViewTypeWebView()
+
+    override fun onCreate(owner: LifecycleOwner) {
+        super.onCreate(owner)
+        notifier.notifier.onEach {
+            if (it is DashboardEvent.NavigationToDiscovery) {
+                _navigateToDiscovery.emit(true)
+            }
+        }.distinctUntilChanged().launchIn(viewModelScope)
+    }
+
+    fun enableBottomBar(enable: Boolean) {
+        _isBottomBarEnabled.value = enable
+    }
+}
diff --git a/app/src/main/java/org/openedx/app/OpenEdXApp.kt b/app/src/main/java/org/openedx/app/OpenEdXApp.kt
index 7cb2b1ad5..9f1f95977 100644
--- a/app/src/main/java/org/openedx/app/OpenEdXApp.kt
+++ b/app/src/main/java/org/openedx/app/OpenEdXApp.kt
@@ -4,14 +4,18 @@ import android.app.Application
 import com.google.firebase.FirebaseOptions
 import com.google.firebase.ktx.Firebase
 import com.google.firebase.ktx.initialize
+import org.koin.android.ext.android.inject
+import org.koin.android.ext.koin.androidContext
+import org.koin.core.context.startKoin
 import org.openedx.app.di.appModule
 import org.openedx.app.di.networkingModule
 import org.openedx.app.di.screenModule
-import org.koin.android.ext.koin.androidContext
-import org.koin.core.context.startKoin
+import org.openedx.core.config.Config
 
 class OpenEdXApp : Application() {
 
+    private val config by inject<Config>()
+
     override fun onCreate() {
         super.onCreate()
         startKoin {
@@ -22,13 +26,13 @@ class OpenEdXApp : Application() {
                 screenModule
             )
         }
-
-        if (org.openedx.core.BuildConfig.FIREBASE_PROJECT_ID.isNotEmpty()) {
+        val firebaseConfig = config.getFirebaseConfig()
+        if (firebaseConfig.enabled) {
             val options = FirebaseOptions.Builder()
-                .setProjectId(org.openedx.core.BuildConfig.FIREBASE_PROJECT_ID)
-                .setApplicationId(getString(org.openedx.core.R.string.google_app_id))
-                .setApiKey(org.openedx.core.BuildConfig.FIREBASE_API_KEY)
-                .setGcmSenderId(org.openedx.core.BuildConfig.FIREBASE_GCM_SENDER_ID)
+                .setProjectId(firebaseConfig.projectId)
+                .setApplicationId(firebaseConfig.applicationId)
+                .setApiKey(firebaseConfig.apiKey)
+                .setGcmSenderId(firebaseConfig.gcmSenderId)
                 .build()
             Firebase.initialize(this, options)
         }
diff --git a/app/src/main/java/org/openedx/app/analytics/Analytics.kt b/app/src/main/java/org/openedx/app/analytics/Analytics.kt
new file mode 100644
index 000000000..ed34ec41a
--- /dev/null
+++ b/app/src/main/java/org/openedx/app/analytics/Analytics.kt
@@ -0,0 +1,9 @@
+package org.openedx.app.analytics
+
+import android.os.Bundle
+
+interface Analytics {
+    fun logScreenEvent(screenName: String, bundle: Bundle)
+    fun logEvent(eventName: String, bundle: Bundle)
+    fun logUserId(userId: Long)
+}
diff --git a/app/src/main/java/org/openedx/app/analytics/FirebaseAnalytics.kt b/app/src/main/java/org/openedx/app/analytics/FirebaseAnalytics.kt
new file mode 100644
index 000000000..6e4db40a0
--- /dev/null
+++ b/app/src/main/java/org/openedx/app/analytics/FirebaseAnalytics.kt
@@ -0,0 +1,30 @@
+package org.openedx.app.analytics
+
+import android.content.Context
+import android.os.Bundle
+import android.util.Log
+import com.google.firebase.analytics.FirebaseAnalytics
+
+class FirebaseAnalytics(context: Context) : Analytics {
+
+    private var tracker: FirebaseAnalytics? = null
+
+    init {
+        tracker = FirebaseAnalytics.getInstance(context)
+        Log.d("Analytics", "Firebase Builder Initialised")
+    }
+
+    override fun logScreenEvent(screenName: String, bundle: Bundle) {
+        Log.d("Analytics", "Firebase log Screen Event: $screenName + $bundle")
+    }
+
+    override fun logEvent(eventName: String, bundle: Bundle) {
+        tracker?.logEvent(eventName, bundle)
+        Log.d("Analytics", "Firebase log Event $eventName: $bundle")
+    }
+
+    override fun logUserId(userId: Long) {
+        tracker?.setUserId(userId.toString())
+        Log.d("Analytics", "Firebase User Id log Event")
+    }
+}
diff --git a/app/src/main/java/org/openedx/app/data/networking/AppUpgradeInterceptor.kt b/app/src/main/java/org/openedx/app/data/networking/AppUpgradeInterceptor.kt
new file mode 100644
index 000000000..4e88eec42
--- /dev/null
+++ b/app/src/main/java/org/openedx/app/data/networking/AppUpgradeInterceptor.kt
@@ -0,0 +1,44 @@
+package org.openedx.app.data.networking
+
+import kotlinx.coroutines.runBlocking
+import okhttp3.Interceptor
+import okhttp3.Response
+import org.openedx.app.BuildConfig
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.system.notifier.AppUpgradeNotifier
+import org.openedx.core.utils.TimeUtils
+import java.util.Date
+
+class AppUpgradeInterceptor(
+    private val appUpgradeNotifier: AppUpgradeNotifier
+) : Interceptor {
+    override fun intercept(chain: Interceptor.Chain): Response {
+        val response = chain.proceed(chain.request())
+        val responseCode = response.code
+        val latestAppVersion = response.header(HEADER_APP_LATEST_VERSION) ?: ""
+        val lastSupportedDateString = response.header(HEADER_APP_VERSION_LAST_SUPPORTED_DATE) ?: ""
+        val lastSupportedDateTime = TimeUtils.iso8601WithTimeZoneToDate(lastSupportedDateString)?.time ?: 0L
+        runBlocking {
+            when {
+                responseCode == 426 -> {
+                    appUpgradeNotifier.send(AppUpgradeEvent.UpgradeRequiredEvent)
+                }
+
+                BuildConfig.VERSION_NAME != latestAppVersion && lastSupportedDateTime > Date().time -> {
+                    appUpgradeNotifier.send(AppUpgradeEvent.UpgradeRecommendedEvent(latestAppVersion))
+                }
+
+                latestAppVersion.isNotEmpty() && BuildConfig.VERSION_NAME != latestAppVersion && lastSupportedDateTime < Date().time -> {
+                    appUpgradeNotifier.send(AppUpgradeEvent.UpgradeRequiredEvent)
+                }
+            }
+        }
+        return response
+    }
+
+    companion object {
+        const val HEADER_APP_LATEST_VERSION = "EDX-APP-LATEST-VERSION"
+        const val HEADER_APP_VERSION_LAST_SUPPORTED_DATE = "EDX-APP-VERSION-LAST-SUPPORTED-DATE"
+    }
+}
+
diff --git a/app/src/main/java/org/openedx/app/data/networking/HandleErrorInterceptor.kt b/app/src/main/java/org/openedx/app/data/networking/HandleErrorInterceptor.kt
index 501208bc3..bd4aa1920 100644
--- a/app/src/main/java/org/openedx/app/data/networking/HandleErrorInterceptor.kt
+++ b/app/src/main/java/org/openedx/app/data/networking/HandleErrorInterceptor.kt
@@ -32,7 +32,7 @@ class HandleErrorInterceptor(
                             return response
                         }
                     }
-                } else if (errorResponse.errorDescription != null) {
+                } else if (errorResponse?.errorDescription != null) {
                     throw EdxError.ValidationException(errorResponse.errorDescription ?: "")
                 }
             } catch (e: JsonSyntaxException) {
diff --git a/app/src/main/java/org/openedx/app/data/networking/HeadersInterceptor.kt b/app/src/main/java/org/openedx/app/data/networking/HeadersInterceptor.kt
index 2e18c51eb..7b1e203e2 100644
--- a/app/src/main/java/org/openedx/app/data/networking/HeadersInterceptor.kt
+++ b/app/src/main/java/org/openedx/app/data/networking/HeadersInterceptor.kt
@@ -1,11 +1,17 @@
 package org.openedx.app.data.networking
 
-import org.openedx.core.ApiConstants
+import android.content.Context
 import okhttp3.Interceptor
 import okhttp3.Response
+import org.openedx.app.BuildConfig
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
 
-class HeadersInterceptor(private val preferencesManager: CorePreferences) : Interceptor {
+class HeadersInterceptor(
+    private val context: Context,
+    private val config: Config,
+    private val preferencesManager: CorePreferences,
+) : Interceptor {
 
     override fun intercept(chain: Interceptor.Chain): Response = chain.run {
         proceed(
@@ -14,10 +20,16 @@ class HeadersInterceptor(private val preferencesManager: CorePreferences) : Inte
                     val token = preferencesManager.accessToken
 
                     if (token.isNotEmpty()) {
-                        addHeader("Authorization", "${ApiConstants.TOKEN_TYPE_BEARER} $token")
+                        addHeader("Authorization", "${config.getAccessTokenType()} $token")
                     }
 
                     addHeader("Accept", "application/json")
+                    addHeader(
+                        "User-Agent", System.getProperty("http.agent") + " " +
+                                context.getString(org.openedx.core.R.string.app_name) + "/" +
+                                BuildConfig.APPLICATION_ID + "/" +
+                                BuildConfig.VERSION_NAME
+                    )
                 }.build()
         )
     }
diff --git a/app/src/main/java/org/openedx/app/data/networking/OauthRefreshTokenAuthenticator.kt b/app/src/main/java/org/openedx/app/data/networking/OauthRefreshTokenAuthenticator.kt
index 777933303..f17677f19 100644
--- a/app/src/main/java/org/openedx/app/data/networking/OauthRefreshTokenAuthenticator.kt
+++ b/app/src/main/java/org/openedx/app/data/networking/OauthRefreshTokenAuthenticator.kt
@@ -2,29 +2,46 @@ package org.openedx.app.data.networking
 
 import android.util.Log
 import com.google.gson.Gson
-import org.openedx.auth.data.api.AuthApi
-import org.openedx.auth.data.model.AuthResponse
-import org.openedx.core.ApiConstants
-import org.openedx.app.system.notifier.AppNotifier
-import org.openedx.app.system.notifier.LogoutEvent
 import kotlinx.coroutines.runBlocking
 import okhttp3.*
+import okhttp3.MediaType.Companion.toMediaType
+import okhttp3.ResponseBody.Companion.toResponseBody
 import okhttp3.logging.HttpLoggingInterceptor
 import org.json.JSONException
 import org.json.JSONObject
+import org.openedx.app.system.notifier.AppNotifier
+import org.openedx.app.system.notifier.LogoutEvent
+import org.openedx.auth.data.api.AuthApi
+import org.openedx.auth.domain.model.AuthResponse
+import org.openedx.core.ApiConstants
+import org.openedx.core.ApiConstants.TOKEN_TYPE_JWT
 import org.openedx.core.BuildConfig
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.utils.TimeUtils
 import retrofit2.Retrofit
 import retrofit2.converter.gson.GsonConverterFactory
 import java.io.IOException
 import java.util.concurrent.TimeUnit
 
 class OauthRefreshTokenAuthenticator(
+    private val config: Config,
     private val preferencesManager: CorePreferences,
     private val appNotifier: AppNotifier,
-) : Authenticator {
+) : Authenticator, Interceptor {
 
     private val authApi: AuthApi
+    private var lastTokenRefreshRequestTime = 0L
+
+    override fun intercept(chain: Interceptor.Chain): Response {
+        if (isTokenExpired()) {
+            val response = createUnauthorizedResponse(chain)
+            val request = authenticate(chain.connection()?.route(), response)
+
+            return request?.let { chain.proceed(it) } ?: chain.proceed(chain.request())
+        }
+        return chain.proceed(chain.request())
+    }
 
     init {
         val okHttpClient = OkHttpClient.Builder().apply {
@@ -35,13 +52,14 @@ class OauthRefreshTokenAuthenticator(
             }
         }.build()
         authApi = Retrofit.Builder()
-            .baseUrl(BuildConfig.BASE_URL)
+            .baseUrl(config.getApiHostURL())
             .client(okHttpClient)
             .addConverterFactory(GsonConverterFactory.create(Gson()))
             .build()
             .create(AuthApi::class.java)
     }
 
+    @Synchronized
     override fun authenticate(route: Route?, response: Response): Request? {
         val accessToken = preferencesManager.accessToken
         val refreshToken = preferencesManager.refreshToken
@@ -53,14 +71,14 @@ class OauthRefreshTokenAuthenticator(
         val errorCode = getErrorCode(response.peekBody(200).string())
         if (errorCode != null) {
             when (errorCode) {
-                TOKEN_EXPIRED_ERROR_MESSAGE -> {
+                TOKEN_EXPIRED_ERROR_MESSAGE, JWT_TOKEN_EXPIRED -> {
                     try {
                         val newAuth = refreshAccessToken(refreshToken)
                         if (newAuth != null) {
                             return response.request.newBuilder()
                                 .header(
-                                    "Authorization",
-                                    ApiConstants.TOKEN_TYPE_BEARER + " " + newAuth.accessToken
+                                    HEADER_AUTHORIZATION,
+                                    config.getAccessTokenType() + " " + newAuth.accessToken
                                 )
                                 .build()
                         } else {
@@ -68,30 +86,30 @@ class OauthRefreshTokenAuthenticator(
                             if (actualToken != accessToken) {
                                 return response.request.newBuilder()
                                     .header(
-                                        "Authorization",
-                                        ApiConstants.TOKEN_TYPE_BEARER + " " + actualToken
+                                        HEADER_AUTHORIZATION,
+                                        "${config.getAccessTokenType()} $actualToken"
                                     )
                                     .build()
                             }
                             return null
                         }
-
                     } catch (e: Exception) {
                         return null
                     }
                 }
-                TOKEN_NONEXISTENT_ERROR_MESSAGE, TOKEN_INVALID_GRANT_ERROR_MESSAGE -> {
+
+                TOKEN_NONEXISTENT_ERROR_MESSAGE, TOKEN_INVALID_GRANT_ERROR_MESSAGE, JWT_INVALID_TOKEN -> {
                     // Retry request with the current access_token if the original access_token used in
                     // request does not match the current access_token. This case can occur when
                     // asynchronous calls are made and are attempting to refresh the access_token where
                     // one call succeeds but the other fails. https://github.com/edx/edx-app-android/pull/834
-                    val authHeaders =
-                        response.request.headers["Authorization"]?.split(" ".toRegex())
+                    val authHeaders = response.request.headers[HEADER_AUTHORIZATION]
+                        ?.split(" ".toRegex())
                     if (authHeaders?.toTypedArray()?.getOrNull(1) != accessToken) {
                         return response.request.newBuilder()
                             .header(
-                                "Authorization",
-                                ApiConstants.TOKEN_TYPE_BEARER + " " + accessToken
+                                HEADER_AUTHORIZATION,
+                                "${config.getAccessTokenType()} $accessToken"
                             ).build()
                     }
 
@@ -99,7 +117,8 @@ class OauthRefreshTokenAuthenticator(
                         appNotifier.send(LogoutEvent())
                     }
                 }
-                DISABLED_USER_ERROR_MESSAGE -> {
+
+                DISABLED_USER_ERROR_MESSAGE, JWT_DISABLED_USER_ERROR_MESSAGE -> {
                     runBlocking {
                         appNotifier.send(LogoutEvent())
                     }
@@ -109,25 +128,42 @@ class OauthRefreshTokenAuthenticator(
         return null
     }
 
+    private fun isTokenExpired(): Boolean {
+        val time = TimeUtils.getCurrentTime() + REFRESH_TOKEN_EXPIRY_THRESHOLD
+        return time >= preferencesManager.accessTokenExpiresAt
+    }
+
+    private fun canRequestTokenRefresh(): Boolean {
+        return TimeUtils.getCurrentTime() - lastTokenRefreshRequestTime >
+                REFRESH_TOKEN_INTERVAL_MINIMUM
+    }
+
     @Throws(IOException::class)
     private fun refreshAccessToken(refreshToken: String): AuthResponse? {
-        val response = authApi.refreshAccessToken(
-            ApiConstants.TOKEN_TYPE_REFRESH,
-            BuildConfig.CLIENT_ID,
-            refreshToken
-        ).execute()
-        val authResponse = response.body()
-        if (response.isSuccessful && authResponse != null) {
-            val newAccessToken = authResponse.accessToken ?: ""
-            val newRefreshToken = authResponse.refreshToken ?: ""
-
-            if (newAccessToken.isNotEmpty() && newRefreshToken.isNotEmpty()) {
-                preferencesManager.accessToken = newAccessToken
-                preferencesManager.refreshToken = newRefreshToken
+        var authResponse: AuthResponse? = null
+        if (canRequestTokenRefresh()) {
+            val response = authApi.refreshAccessToken(
+                ApiConstants.TOKEN_TYPE_REFRESH,
+                config.getOAuthClientId(),
+                refreshToken,
+                config.getAccessTokenType()
+            ).execute()
+            authResponse = response.body()?.mapToDomain()
+            if (response.isSuccessful && authResponse != null) {
+                val newAccessToken = authResponse.accessToken ?: ""
+                val newRefreshToken = authResponse.refreshToken ?: ""
+                val newExpireTime = authResponse.getTokenExpiryTime()
+
+                if (newAccessToken.isNotEmpty() && newRefreshToken.isNotEmpty()) {
+                    preferencesManager.accessToken = newAccessToken
+                    preferencesManager.refreshToken = newRefreshToken
+                    preferencesManager.accessTokenExpiresAt = newExpireTime
+                    lastTokenRefreshRequestTime = TimeUtils.getCurrentTime()
+                }
+            } else if (response.code() == 400) {
+                //another refresh already in progress
+                Thread.sleep(1500)
             }
-        } else if (response.code() == 400) {
-            //another refresh already in progress
-            Thread.sleep(1500)
         }
 
         return authResponse
@@ -136,17 +172,22 @@ class OauthRefreshTokenAuthenticator(
     private fun getErrorCode(responseBody: String): String? {
         try {
             val jsonObj = JSONObject(responseBody)
-            var errorCode = jsonObj.optString("error_code", "")
-            return if (errorCode != "") {
-                errorCode
+            if (jsonObj.has(FIELD_ERROR_CODE)) {
+                return jsonObj.getString(FIELD_ERROR_CODE)
             } else {
-                errorCode = jsonObj
-                    .optJSONObject("developer_message")
-                    ?.optString("error_code", "") ?: ""
-                if (errorCode != "") {
-                    errorCode
+                return if (TOKEN_TYPE_JWT.equals(config.getAccessTokenType(), ignoreCase = true)) {
+                    val errorType =
+                        if (jsonObj.has(FIELD_DETAIL)) FIELD_DETAIL else FIELD_DEVELOPER_MESSAGE
+                    jsonObj.getString(errorType)
                 } else {
-                    null
+                    val errorCode = jsonObj
+                        .optJSONObject(FIELD_DEVELOPER_MESSAGE)
+                        ?.optString(FIELD_ERROR_CODE, "") ?: ""
+                    if (errorCode != "") {
+                        errorCode
+                    } else {
+                        null
+                    }
                 }
             }
         } catch (ex: JSONException) {
@@ -155,10 +196,68 @@ class OauthRefreshTokenAuthenticator(
         }
     }
 
+    /**
+     * [createUnauthorizedResponse] creates an unauthorized okhttp response with the initial chain
+     * request for [authenticate] method of [OauthRefreshTokenAuthenticator]. The response is
+     * specially designed to trigger the 'Token Expired' case of the [authenticate] method so that
+     * it can handle the refresh logic of the access token accordingly.
+     *
+     * @param chain Chain request for authentication
+     * @return Custom unauthorized response builder with initial request
+     */
+    private fun createUnauthorizedResponse(chain: Interceptor.Chain) = Response.Builder()
+        .code(401)
+        .request(chain.request())
+        .protocol(Protocol.HTTP_1_1)
+        .message("Unauthorized")
+        .headers(chain.request().headers)
+        .body(getResponseBody())
+        .build()
+
+    /**
+     * [getResponseBody] generates an error response body based on access token type because both
+     * Bearer and JWT have their own sets of errors.
+     *
+     * @return ResponseBody based on access token type
+     */
+    private fun getResponseBody(): ResponseBody {
+        val tokenType = config.getAccessTokenType()
+        val jsonObject = if (TOKEN_TYPE_JWT.equals(tokenType, ignoreCase = true)) {
+            JSONObject().put("detail", JWT_TOKEN_EXPIRED)
+        } else {
+            JSONObject().put("error_code", TOKEN_EXPIRED_ERROR_MESSAGE)
+        }
+
+        return jsonObject.toString().toResponseBody("application/json".toMediaType())
+    }
+
     companion object {
+        private const val HEADER_AUTHORIZATION = "Authorization"
+
         private const val TOKEN_EXPIRED_ERROR_MESSAGE = "token_expired"
         private const val TOKEN_NONEXISTENT_ERROR_MESSAGE = "token_nonexistent"
         private const val TOKEN_INVALID_GRANT_ERROR_MESSAGE = "invalid_grant"
         private const val DISABLED_USER_ERROR_MESSAGE = "user_is_disabled"
+        private const val JWT_TOKEN_EXPIRED = "Token has expired."
+        private const val JWT_INVALID_TOKEN = "Invalid token."
+        private const val JWT_DISABLED_USER_ERROR_MESSAGE = "User account is disabled."
+
+        private const val FIELD_ERROR_CODE = "error_code"
+        private const val FIELD_DETAIL = "detail"
+        private const val FIELD_DEVELOPER_MESSAGE = "developer_message"
+
+        /**
+         * [REFRESH_TOKEN_EXPIRY_THRESHOLD] behave as a buffer time to be used in the expiry
+         * verification method of the access token to ensure that the token doesn't expire during
+         * an active session.
+         */
+        private const val REFRESH_TOKEN_EXPIRY_THRESHOLD = 60 * 1000
+
+        /**
+         * [REFRESH_TOKEN_INTERVAL_MINIMUM] behave as a buffer time for refresh token network
+         * requests. It prevents multiple calls to refresh network requests in case of an
+         * unauthorized access token during async requests.
+         */
+        private const val REFRESH_TOKEN_INTERVAL_MINIMUM = 60 * 1000
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/main/java/org/openedx/app/data/storage/PreferencesManager.kt b/app/src/main/java/org/openedx/app/data/storage/PreferencesManager.kt
index dd7f652af..bd7eb17e5 100644
--- a/app/src/main/java/org/openedx/app/data/storage/PreferencesManager.kt
+++ b/app/src/main/java/org/openedx/app/data/storage/PreferencesManager.kt
@@ -2,15 +2,20 @@ package org.openedx.app.data.storage
 
 import android.content.Context
 import com.google.gson.Gson
+import org.openedx.app.BuildConfig
+import org.openedx.core.data.model.User
 import org.openedx.core.data.storage.CorePreferences
-import org.openedx.profile.domain.model.Account
-import org.openedx.core.domain.model.User
+import org.openedx.core.data.storage.InAppReviewPreferences
 import org.openedx.core.domain.model.VideoSettings
+import org.openedx.profile.data.model.Account
 import org.openedx.profile.data.storage.ProfilePreferences
+import org.openedx.whatsnew.data.storage.WhatsNewPreferences
 
-class PreferencesManager(context: Context) : CorePreferences, ProfilePreferences {
+class PreferencesManager(context: Context) : CorePreferences, ProfilePreferences,
+    WhatsNewPreferences, InAppReviewPreferences {
 
-    private val sharedPreferences = context.getSharedPreferences("org.openedx.app", Context.MODE_PRIVATE)
+    private val sharedPreferences =
+        context.getSharedPreferences(BuildConfig.APPLICATION_ID, Context.MODE_PRIVATE)
 
     private fun saveString(key: String, value: String) {
         sharedPreferences.edit().apply {
@@ -20,11 +25,28 @@ class PreferencesManager(context: Context) : CorePreferences, ProfilePreferences
 
     private fun getString(key: String): String = sharedPreferences.getString(key, "") ?: ""
 
+    private fun saveLong(key: String, value: Long) {
+        sharedPreferences.edit().apply {
+            putLong(key, value)
+        }.apply()
+    }
+
+    private fun getLong(key: String): Long = sharedPreferences.getLong(key, 0L)
+
+    private fun saveBoolean(key: String, value: Boolean) {
+        sharedPreferences.edit().apply {
+            putBoolean(key, value)
+        }.apply()
+    }
+
+    private fun getBoolean(key: String): Boolean = sharedPreferences.getBoolean(key, false)
+
     override fun clear() {
         sharedPreferences.edit().apply {
             remove(ACCESS_TOKEN)
             remove(REFRESH_TOKEN)
             remove(USER)
+            remove(EXPIRES_IN)
         }.apply()
     }
 
@@ -40,6 +62,12 @@ class PreferencesManager(context: Context) : CorePreferences, ProfilePreferences
         }
         get() = getString(REFRESH_TOKEN)
 
+    override var accessTokenExpiresAt: Long
+        set(value) {
+            saveLong(EXPIRES_IN, value)
+        }
+        get() = getLong(EXPIRES_IN)
+
     override var user: User?
         set(value) {
             val userJson = Gson().toJson(value)
@@ -71,11 +99,42 @@ class PreferencesManager(context: Context) : CorePreferences, ProfilePreferences
                 ?: VideoSettings.default
         }
 
+    override var lastWhatsNewVersion: String
+        set(value) {
+            saveString(LAST_WHATS_NEW_VERSION, value)
+        }
+        get() = getString(LAST_WHATS_NEW_VERSION)
+
+    override var lastReviewVersion: InAppReviewPreferences.VersionName
+        set(value) {
+            val versionNameJson = Gson().toJson(value)
+            saveString(LAST_REVIEW_VERSION, versionNameJson)
+        }
+        get() {
+            val versionNameString = getString(LAST_REVIEW_VERSION)
+            return Gson().fromJson(
+                versionNameString,
+                InAppReviewPreferences.VersionName::class.java
+            )
+                ?: InAppReviewPreferences.VersionName.default
+        }
+
+
+    override var wasPositiveRated: Boolean
+        set(value) {
+            saveBoolean(APP_WAS_POSITIVE_RATED, value)
+        }
+        get() = getBoolean(APP_WAS_POSITIVE_RATED)
+
     companion object {
         private const val ACCESS_TOKEN = "access_token"
         private const val REFRESH_TOKEN = "refresh_token"
+        private const val EXPIRES_IN = "expires_in"
         private const val USER = "user"
         private const val ACCOUNT = "account"
         private const val VIDEO_SETTINGS = "video_settings"
+        private const val LAST_WHATS_NEW_VERSION = "last_whats_new_version"
+        private const val LAST_REVIEW_VERSION = "last_review_version"
+        private const val APP_WAS_POSITIVE_RATED = "app_was_positive_rated"
     }
-}
\ No newline at end of file
+}
diff --git a/app/src/main/java/org/openedx/app/di/AppModule.kt b/app/src/main/java/org/openedx/app/di/AppModule.kt
index 4b3da913e..c5a267ece 100644
--- a/app/src/main/java/org/openedx/app/di/AppModule.kt
+++ b/app/src/main/java/org/openedx/app/di/AppModule.kt
@@ -1,53 +1,76 @@
 package org.openedx.app.di
 
+import androidx.appcompat.app.AppCompatActivity
 import androidx.room.Room
 import androidx.room.RoomDatabase
+import com.google.android.play.core.review.ReviewManagerFactory
 import com.google.gson.Gson
 import com.google.gson.GsonBuilder
+import kotlinx.coroutines.Dispatchers
+import org.koin.android.ext.koin.androidApplication
+import org.koin.core.qualifier.named
+import org.koin.dsl.module
+import org.openedx.app.AnalyticsManager
+import org.openedx.app.AppAnalytics
+import org.openedx.app.AppRouter
+import org.openedx.app.BuildConfig
+import org.openedx.app.data.storage.PreferencesManager
+import org.openedx.app.room.AppDatabase
+import org.openedx.app.room.DATABASE_NAME
+import org.openedx.app.system.notifier.AppNotifier
 import org.openedx.auth.presentation.AuthAnalytics
 import org.openedx.auth.presentation.AuthRouter
-import org.openedx.app.data.storage.PreferencesManager
+import org.openedx.auth.presentation.sso.FacebookAuthHelper
+import org.openedx.auth.presentation.sso.GoogleAuthHelper
+import org.openedx.auth.presentation.sso.MicrosoftAuthHelper
+import org.openedx.auth.presentation.sso.OAuthHelper
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.data.storage.InAppReviewPreferences
+import org.openedx.core.interfaces.EnrollInCourseInteractor
 import org.openedx.core.module.DownloadWorkerController
 import org.openedx.core.module.TranscriptManager
 import org.openedx.core.module.download.FileDownloader
+import org.openedx.core.presentation.dialog.appreview.AppReviewManager
+import org.openedx.core.presentation.global.AppData
+import org.openedx.core.presentation.global.WhatsNewGlobalManager
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRouter
 import org.openedx.core.system.AppCookieManager
 import org.openedx.core.system.ResourceManager
 import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.AppUpgradeNotifier
 import org.openedx.core.system.notifier.CourseNotifier
+import org.openedx.course.domain.interactor.CourseInteractor
+import org.openedx.dashboard.notifier.DashboardNotifier
 import org.openedx.course.presentation.CourseAnalytics
 import org.openedx.course.presentation.CourseRouter
-import org.openedx.dashboard.presentation.DashboardAnalytics
+import org.openedx.dashboard.presentation.dashboard.DashboardAnalytics
 import org.openedx.dashboard.presentation.DashboardRouter
 import org.openedx.discovery.presentation.DiscoveryAnalytics
 import org.openedx.discovery.presentation.DiscoveryRouter
 import org.openedx.discussion.presentation.DiscussionAnalytics
 import org.openedx.discussion.presentation.DiscussionRouter
 import org.openedx.discussion.system.notifier.DiscussionNotifier
-import org.openedx.app.AnalyticsManager
-import org.openedx.app.AppAnalytics
-import org.openedx.app.AppRouter
-import org.openedx.app.room.AppDatabase
-import org.openedx.app.room.DATABASE_NAME
-import org.openedx.app.system.notifier.AppNotifier
+import org.openedx.profile.data.storage.ProfilePreferences
 import org.openedx.profile.presentation.ProfileAnalytics
 import org.openedx.profile.presentation.ProfileRouter
 import org.openedx.profile.system.notifier.ProfileNotifier
-import kotlinx.coroutines.Dispatchers
-import org.koin.android.ext.koin.androidApplication
-import org.koin.core.qualifier.named
-import org.koin.dsl.module
-import org.openedx.core.data.storage.CorePreferences
-import org.openedx.profile.data.storage.ProfilePreferences
+import org.openedx.whatsnew.WhatsNewManager
+import org.openedx.whatsnew.WhatsNewRouter
+import org.openedx.whatsnew.data.storage.WhatsNewPreferences
 
 val appModule = module {
 
+    single { Config(get()) }
     single { PreferencesManager(get()) }
     single<CorePreferences> { get<PreferencesManager>() }
     single<ProfilePreferences> { get<PreferencesManager>() }
+    single<WhatsNewPreferences> { get<PreferencesManager>() }
+    single<InAppReviewPreferences> { get<PreferencesManager>() }
 
     single { ResourceManager(get()) }
-
-    single { AppCookieManager(get()) }
+    single { AppCookieManager(get(), get()) }
+    single { ReviewManagerFactory.create(get()) }
 
     single<Gson> { GsonBuilder().create() }
 
@@ -55,6 +78,8 @@ val appModule = module {
     single { CourseNotifier() }
     single { DiscussionNotifier() }
     single { ProfileNotifier() }
+    single { AppUpgradeNotifier() }
+    single { DashboardNotifier() }
 
     single { AppRouter() }
     single<AuthRouter> { get<AppRouter>() }
@@ -63,7 +88,8 @@ val appModule = module {
     single<CourseRouter> { get<AppRouter>() }
     single<DiscussionRouter> { get<AppRouter>() }
     single<ProfileRouter> { get<AppRouter>() }
-
+    single<WhatsNewRouter> { get<AppRouter>() }
+    single<AppUpgradeRouter> { get<AppRouter>() }
 
     single { NetworkConnection(get()) }
 
@@ -113,9 +139,14 @@ val appModule = module {
         DownloadWorkerController(get(), get(), get())
     }
 
+    single { AppData(versionName = BuildConfig.VERSION_NAME) }
+    factory { (activity: AppCompatActivity) -> AppReviewManager(activity, get(), get()) }
+
     single { TranscriptManager(get()) }
+    single { WhatsNewManager(get(), get(), get(), get()) }
+    single<WhatsNewGlobalManager> { get<WhatsNewManager>() }
 
-    single { AnalyticsManager(get()) }
+    single { AnalyticsManager(get(), get()) }
     single<DashboardAnalytics> { get<AnalyticsManager>() }
     single<AuthAnalytics> { get<AnalyticsManager>() }
     single<AppAnalytics> { get<AnalyticsManager>() }
@@ -123,4 +154,11 @@ val appModule = module {
     single<ProfileAnalytics> { get<AnalyticsManager>() }
     single<CourseAnalytics> { get<AnalyticsManager>() }
     single<DiscussionAnalytics> { get<AnalyticsManager>() }
-}
\ No newline at end of file
+
+    factory { FacebookAuthHelper() }
+    factory { GoogleAuthHelper(get()) }
+    factory { MicrosoftAuthHelper() }
+    factory { OAuthHelper(get(), get(), get()) }
+
+    factory<EnrollInCourseInteractor> { CourseInteractor(get()) }
+}
diff --git a/app/src/main/java/org/openedx/app/di/NetworkingModule.kt b/app/src/main/java/org/openedx/app/di/NetworkingModule.kt
index ea8b645bd..b74deefbb 100644
--- a/app/src/main/java/org/openedx/app/di/NetworkingModule.kt
+++ b/app/src/main/java/org/openedx/app/di/NetworkingModule.kt
@@ -1,41 +1,46 @@
 package org.openedx.app.di
 
+import okhttp3.OkHttpClient
+import okhttp3.logging.HttpLoggingInterceptor
+import org.koin.dsl.module
+import org.openedx.app.data.networking.AppUpgradeInterceptor
+import org.openedx.app.data.networking.HandleErrorInterceptor
+import org.openedx.app.data.networking.HeadersInterceptor
+import org.openedx.app.data.networking.OauthRefreshTokenAuthenticator
 import org.openedx.auth.data.api.AuthApi
+import org.openedx.core.BuildConfig
+import org.openedx.core.config.Config
 import org.openedx.core.data.api.CookiesApi
 import org.openedx.core.data.api.CourseApi
 import org.openedx.discussion.data.api.DiscussionApi
-import org.openedx.app.data.networking.HandleErrorInterceptor
-import org.openedx.app.data.networking.HeadersInterceptor
-import org.openedx.app.data.networking.OauthRefreshTokenAuthenticator
 import org.openedx.profile.data.api.ProfileApi
-import okhttp3.OkHttpClient
-import okhttp3.logging.HttpLoggingInterceptor
-import org.koin.dsl.module
-import org.openedx.core.BuildConfig
 import retrofit2.Retrofit
 import retrofit2.converter.gson.GsonConverterFactory
 import java.util.concurrent.TimeUnit
 
 val networkingModule = module {
 
-    single { OauthRefreshTokenAuthenticator(get(), get()) }
+    single { OauthRefreshTokenAuthenticator(get(), get(), get()) }
 
     single {
         OkHttpClient.Builder().apply {
             writeTimeout(60, TimeUnit.SECONDS)
             readTimeout(60, TimeUnit.SECONDS)
-            addInterceptor(HeadersInterceptor(get()))
+            addInterceptor(HeadersInterceptor(get(), get(), get()))
             if (BuildConfig.DEBUG) {
                 addNetworkInterceptor(HttpLoggingInterceptor().setLevel(HttpLoggingInterceptor.Level.BODY))
             }
             addInterceptor(HandleErrorInterceptor(get()))
+            addInterceptor(AppUpgradeInterceptor(get()))
+            addInterceptor(get<OauthRefreshTokenAuthenticator>())
             authenticator(get<OauthRefreshTokenAuthenticator>())
         }.build()
     }
 
     single<Retrofit> {
+        val config = this.get<Config>()
         Retrofit.Builder()
-            .baseUrl(org.openedx.core.BuildConfig.BASE_URL)
+            .baseUrl(config.getApiHostURL())
             .client(get())
             .addConverterFactory(GsonConverterFactory.create(get()))
             .build()
@@ -51,4 +56,4 @@ val networkingModule = module {
 
 inline fun <reified T> provideApi(retrofit: Retrofit): T {
     return retrofit.create(T::class.java)
-}
\ No newline at end of file
+}
diff --git a/app/src/main/java/org/openedx/app/di/ScreenModule.kt b/app/src/main/java/org/openedx/app/di/ScreenModule.kt
index 3b48775e3..9ccac7be7 100644
--- a/app/src/main/java/org/openedx/app/di/ScreenModule.kt
+++ b/app/src/main/java/org/openedx/app/di/ScreenModule.kt
@@ -1,31 +1,41 @@
 package org.openedx.app.di
 
+import org.koin.androidx.viewmodel.dsl.viewModel
+import org.koin.core.qualifier.named
+import org.koin.dsl.module
+import org.openedx.app.AppViewModel
+import org.openedx.app.MainViewModel
 import org.openedx.auth.data.repository.AuthRepository
 import org.openedx.auth.domain.interactor.AuthInteractor
 import org.openedx.auth.presentation.restore.RestorePasswordViewModel
 import org.openedx.auth.presentation.signin.SignInViewModel
 import org.openedx.auth.presentation.signup.SignUpViewModel
 import org.openedx.core.Validator
-import org.openedx.profile.domain.model.Account
-import org.openedx.core.presentation.dialog.SelectDialogViewModel
+import org.openedx.core.presentation.dialog.selectorbottomsheet.SelectDialogViewModel
 import org.openedx.course.data.repository.CourseRepository
 import org.openedx.course.domain.interactor.CourseInteractor
 import org.openedx.course.presentation.container.CourseContainerViewModel
+import org.openedx.course.presentation.dates.CourseDatesViewModel
 import org.openedx.course.presentation.detail.CourseDetailsViewModel
 import org.openedx.course.presentation.handouts.HandoutsViewModel
+import org.openedx.course.presentation.info.CourseInfoViewModel
 import org.openedx.course.presentation.outline.CourseOutlineViewModel
-import org.openedx.discovery.presentation.search.CourseSearchViewModel
 import org.openedx.course.presentation.section.CourseSectionViewModel
 import org.openedx.course.presentation.unit.container.CourseUnitContainerViewModel
+import org.openedx.course.presentation.unit.html.HtmlUnitViewModel
+import org.openedx.course.presentation.unit.video.EncodedVideoUnitViewModel
 import org.openedx.course.presentation.unit.video.VideoUnitViewModel
 import org.openedx.course.presentation.unit.video.VideoViewModel
 import org.openedx.course.presentation.videos.CourseVideoViewModel
 import org.openedx.dashboard.data.repository.DashboardRepository
 import org.openedx.dashboard.domain.interactor.DashboardInteractor
-import org.openedx.dashboard.presentation.DashboardViewModel
+import org.openedx.dashboard.presentation.dashboard.DashboardViewModel
+import org.openedx.dashboard.presentation.program.ProgramViewModel
 import org.openedx.discovery.data.repository.DiscoveryRepository
 import org.openedx.discovery.domain.interactor.DiscoveryInteractor
-import org.openedx.discovery.presentation.DiscoveryViewModel
+import org.openedx.discovery.presentation.NativeDiscoveryViewModel
+import org.openedx.discovery.presentation.WebViewDiscoveryViewModel
+import org.openedx.discovery.presentation.search.CourseSearchViewModel
 import org.openedx.discussion.data.repository.DiscussionRepository
 import org.openedx.discussion.domain.interactor.DiscussionInteractor
 import org.openedx.discussion.domain.model.DiscussionComment
@@ -35,65 +45,227 @@ import org.openedx.discussion.presentation.search.DiscussionSearchThreadViewMode
 import org.openedx.discussion.presentation.threads.DiscussionAddThreadViewModel
 import org.openedx.discussion.presentation.threads.DiscussionThreadsViewModel
 import org.openedx.discussion.presentation.topics.DiscussionTopicsViewModel
-import org.openedx.app.AppViewModel
 import org.openedx.profile.data.repository.ProfileRepository
 import org.openedx.profile.domain.interactor.ProfileInteractor
+import org.openedx.profile.domain.model.Account
+import org.openedx.profile.presentation.anothers_account.AnothersProfileViewModel
 import org.openedx.profile.presentation.delete.DeleteProfileViewModel
 import org.openedx.profile.presentation.edit.EditProfileViewModel
 import org.openedx.profile.presentation.profile.ProfileViewModel
 import org.openedx.profile.presentation.settings.video.VideoQualityViewModel
 import org.openedx.profile.presentation.settings.video.VideoSettingsViewModel
-import org.koin.androidx.viewmodel.dsl.viewModel
-import org.koin.core.qualifier.named
-import org.koin.dsl.module
+import org.openedx.whatsnew.presentation.whatsnew.WhatsNewViewModel
 
 val screenModule = module {
 
-    viewModel { AppViewModel(get(), get(), get(), get(named("IODispatcher")), get()) }
+    viewModel { AppViewModel(get(), get(), get(), get(), get(named("IODispatcher")), get()) }
+    viewModel { MainViewModel(get(), get()) }
 
-    factory { AuthRepository(get(), get()) }
+    factory { AuthRepository(get(), get(), get()) }
     factory { AuthInteractor(get()) }
     factory { Validator() }
-    viewModel { SignInViewModel(get(), get(), get(), get(), get()) }
-    viewModel { SignUpViewModel(get(), get(), get(), get()) }
-    viewModel { RestorePasswordViewModel(get(), get(), get()) }
+    viewModel { (courseId: String?) ->
+        SignInViewModel(
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            courseId,
+        )
+    }
+    viewModel { (courseId: String?) ->
+        SignUpViewModel(get(), get(), get(), get(), get(), get(), get(), courseId)
+    }
+    viewModel { RestorePasswordViewModel(get(), get(), get(), get()) }
 
-    factory { DashboardRepository(get(), get(),get()) }
+    factory { DashboardRepository(get(), get(), get()) }
     factory { DashboardInteractor(get()) }
-    viewModel { DashboardViewModel(get(), get(), get(), get(), get()) }
+    viewModel { DashboardViewModel(get(), get(), get(), get(), get(), get(), get(), get()) }
 
     factory { DiscoveryRepository(get(), get()) }
     factory { DiscoveryInteractor(get()) }
-    viewModel { DiscoveryViewModel(get(), get(), get(), get()) }
+    viewModel { NativeDiscoveryViewModel(get(), get(), get(), get(), get(), get(), get()) }
+    viewModel { WebViewDiscoveryViewModel(get(), get(), get()) }
 
-    factory { ProfileRepository(get(), get(), get()) }
+    factory { ProfileRepository(get(), get(), get(), get(), get()) }
     factory { ProfileInteractor(get()) }
-    viewModel { ProfileViewModel(get(), get(), get(), get(), get(named("IODispatcher")), get(), get(), get()) }
+    viewModel {
+        ProfileViewModel(
+            appData = get(),
+            config = get(),
+            interactor = get(),
+            resourceManager = get(),
+            notifier = get(),
+            dispatcher = get(named("IODispatcher")),
+            cookieManager = get(),
+            workerController = get(),
+            analytics = get(),
+            appUpgradeNotifier = get(),
+            router = get(),
+        )
+    }
     viewModel { (account: Account) -> EditProfileViewModel(get(), get(), get(), get(), account) }
     viewModel { VideoSettingsViewModel(get(), get()) }
     viewModel { VideoQualityViewModel(get(), get()) }
     viewModel { DeleteProfileViewModel(get(), get(), get(), get()) }
+    viewModel { (username: String) -> AnothersProfileViewModel(get(), get(), username) }
 
-    single { CourseRepository(get(), get(), get(),get()) }
+    single { CourseRepository(get(), get(), get(), get()) }
     factory { CourseInteractor(get()) }
-    viewModel { (courseId: String) -> CourseDetailsViewModel(courseId, get(), get(), get(), get(), get()) }
-    viewModel { (courseId: String) -> CourseContainerViewModel(courseId, get(), get(), get(), get(), get()) }
-    viewModel { (courseId: String) -> CourseOutlineViewModel(courseId, get(), get(), get(), get(), get(), get(), get(), get()) }
-    viewModel { (courseId: String) -> CourseSectionViewModel(get(), get(), get(), get(), get(), get(), get(), get(), courseId) }
-    viewModel { (courseId: String) -> CourseUnitContainerViewModel(get(), get(), get(), courseId) }
-    viewModel { (courseId: String) -> CourseVideoViewModel(courseId, get(), get(), get(), get(), get(), get(), get()) }
-    viewModel { (courseId: String) -> VideoViewModel(courseId, get(), get()) }
+    viewModel { CourseInfoViewModel(get(), get(), get(), get(), get(), get()) }
+    viewModel { (courseId: String) ->
+        CourseDetailsViewModel(
+            courseId,
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get()
+        )
+    }
+    viewModel { (courseId: String, courseTitle: String) ->
+        CourseContainerViewModel(
+            courseId,
+            courseTitle,
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get()
+        )
+    }
+    viewModel { (courseId: String) ->
+        CourseOutlineViewModel(
+            courseId,
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get()
+        )
+    }
+    viewModel { (courseId: String) ->
+        CourseSectionViewModel(
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            courseId
+        )
+    }
+    viewModel { (courseId: String) ->
+        CourseUnitContainerViewModel(
+            get(),
+            get(),
+            get(),
+            get(),
+            courseId
+        )
+    }
+    viewModel { (courseId: String) ->
+        CourseVideoViewModel(
+            courseId,
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get()
+        )
+    }
+    viewModel { (courseId: String) -> VideoViewModel(courseId, get(), get(), get()) }
     viewModel { (courseId: String) -> VideoUnitViewModel(courseId, get(), get(), get(), get()) }
-    viewModel { (courseId:String, handoutsType: String) -> HandoutsViewModel(courseId, handoutsType, get()) }
-    viewModel { CourseSearchViewModel(get(), get(), get()) }
+    viewModel { (courseId: String, blockId: String) ->
+        EncodedVideoUnitViewModel(
+            courseId,
+            blockId,
+            get(),
+            get(),
+            get(),
+            get(),
+            get(),
+            get()
+        )
+    }
+    viewModel { (courseId: String, isSelfPaced: Boolean) ->
+        CourseDatesViewModel(
+            courseId,
+            isSelfPaced,
+            get(),
+            get(),
+            get()
+        )
+    }
+    viewModel { (courseId: String, handoutsType: String) ->
+        HandoutsViewModel(
+            courseId,
+            get(),
+            handoutsType,
+            get()
+        )
+    }
+    viewModel { CourseSearchViewModel(get(), get(), get(), get(), get()) }
     viewModel { SelectDialogViewModel(get()) }
 
     single { DiscussionRepository(get(), get()) }
     factory { DiscussionInteractor(get()) }
     viewModel { (courseId: String) -> DiscussionTopicsViewModel(get(), get(), get(), courseId) }
-    viewModel { (courseId: String, topicId: String, threadType: String) ->  DiscussionThreadsViewModel(get(), get(), get(), courseId, topicId, threadType) }
-    viewModel { (thread: org.openedx.discussion.domain.model.Thread) -> DiscussionCommentsViewModel(get(), get(), get(), thread) }
-    viewModel { (comment: DiscussionComment) -> DiscussionResponsesViewModel(get(), get(), get(), comment) }
+    viewModel { (courseId: String, topicId: String, threadType: String) ->
+        DiscussionThreadsViewModel(
+            get(),
+            get(),
+            get(),
+            courseId,
+            topicId,
+            threadType
+        )
+    }
+    viewModel { (thread: org.openedx.discussion.domain.model.Thread) ->
+        DiscussionCommentsViewModel(
+            get(),
+            get(),
+            get(),
+            thread
+        )
+    }
+    viewModel { (comment: DiscussionComment) ->
+        DiscussionResponsesViewModel(
+            get(),
+            get(),
+            get(),
+            comment
+        )
+    }
     viewModel { (courseId: String) -> DiscussionAddThreadViewModel(get(), get(), get(), courseId) }
-    viewModel { (courseId: String) -> DiscussionSearchThreadViewModel(get(), get(), get(), courseId) }
-}
\ No newline at end of file
+    viewModel { (courseId: String) ->
+        DiscussionSearchThreadViewModel(
+            get(),
+            get(),
+            get(),
+            courseId
+        )
+    }
+
+    viewModel { (courseId: String?) -> WhatsNewViewModel(courseId, get()) }
+    viewModel { HtmlUnitViewModel(get(), get(), get(), get()) }
+
+    viewModel { ProgramViewModel(get(), get(), get(), get(), get(), get(), get()) }
+}
diff --git a/app/src/test/java/org/openedx/AppViewModelTest.kt b/app/src/test/java/org/openedx/AppViewModelTest.kt
index 6b3961864..40b3e813d 100644
--- a/app/src/test/java/org/openedx/AppViewModelTest.kt
+++ b/app/src/test/java/org/openedx/AppViewModelTest.kt
@@ -4,13 +4,6 @@ import androidx.arch.core.executor.testing.InstantTaskExecutorRule
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LifecycleRegistry
-import org.openedx.app.data.storage.PreferencesManager
-import org.openedx.core.domain.model.User
-import org.openedx.app.room.AppDatabase
-import org.openedx.app.system.notifier.AppNotifier
-import org.openedx.app.system.notifier.LogoutEvent
-import org.openedx.app.AppAnalytics
-import org.openedx.app.AppViewModel
 import io.mockk.every
 import io.mockk.mockk
 import io.mockk.verify
@@ -27,6 +20,14 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.app.AppAnalytics
+import org.openedx.app.AppViewModel
+import org.openedx.app.data.storage.PreferencesManager
+import org.openedx.app.room.AppDatabase
+import org.openedx.app.system.notifier.AppNotifier
+import org.openedx.app.system.notifier.LogoutEvent
+import org.openedx.core.config.Config
+import org.openedx.core.data.model.User
 
 @ExperimentalCoroutinesApi
 class AppViewModelTest {
@@ -36,6 +37,7 @@ class AppViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()//UnconfinedTestDispatcher()
 
+    private val config = mockk<Config>()
     private val notifier = mockk<AppNotifier>()
     private val room = mockk<AppDatabase>()
     private val preferencesManager = mockk<PreferencesManager>()
@@ -58,7 +60,8 @@ class AppViewModelTest {
         every { analytics.setUserIdForSession(any()) } returns Unit
         every { preferencesManager.user } returns user
         every { notifier.notifier } returns flow { }
-        val viewModel = AppViewModel(notifier, room, preferencesManager, dispatcher, analytics)
+        val viewModel =
+            AppViewModel(config, notifier, room, preferencesManager, dispatcher, analytics)
 
         val mockLifeCycleOwner: LifecycleOwner = mockk()
         val lifecycleRegistry = LifecycleRegistry(mockLifeCycleOwner)
@@ -79,7 +82,8 @@ class AppViewModelTest {
         every { preferencesManager.user } returns user
         every { room.clearAllTables() } returns Unit
         every { analytics.logoutEvent(true) } returns Unit
-        val viewModel = AppViewModel(notifier, room, preferencesManager, dispatcher, analytics)
+        val viewModel =
+            AppViewModel(config, notifier, room, preferencesManager, dispatcher, analytics)
 
         val mockLifeCycleOwner: LifecycleOwner = mockk()
         val lifecycleRegistry = LifecycleRegistry(mockLifeCycleOwner)
@@ -87,8 +91,8 @@ class AppViewModelTest {
         lifecycleRegistry.handleLifecycleEvent(Lifecycle.Event.ON_START)
         advanceUntilIdle()
 
-         verify(exactly = 1) { analytics.logoutEvent(true) }
-         assert(viewModel.logoutUser.value != null)
+        verify(exactly = 1) { analytics.logoutEvent(true) }
+        assert(viewModel.logoutUser.value != null)
     }
 
     @Test
@@ -102,7 +106,8 @@ class AppViewModelTest {
         every { preferencesManager.user } returns user
         every { room.clearAllTables() } returns Unit
         every { analytics.logoutEvent(true) } returns Unit
-        val viewModel = AppViewModel(notifier, room, preferencesManager, dispatcher, analytics)
+        val viewModel =
+            AppViewModel(config, notifier, room, preferencesManager, dispatcher, analytics)
 
         val mockLifeCycleOwner: LifecycleOwner = mockk()
         val lifecycleRegistry = LifecycleRegistry(mockLifeCycleOwner)
@@ -110,12 +115,11 @@ class AppViewModelTest {
         lifecycleRegistry.handleLifecycleEvent(Lifecycle.Event.ON_START)
         advanceUntilIdle()
 
-         verify(exactly = 1) { analytics.logoutEvent(true) }
-         verify(exactly = 1) { preferencesManager.clear() }
-         verify(exactly = 1) { analytics.setUserIdForSession(any()) }
-         verify(exactly = 1) { preferencesManager.user }
-         verify(exactly = 1) { room.clearAllTables() }
-         verify(exactly = 1) { analytics.logoutEvent(true) }
+        verify(exactly = 1) { analytics.logoutEvent(true) }
+        verify(exactly = 1) { preferencesManager.clear() }
+        verify(exactly = 1) { analytics.setUserIdForSession(any()) }
+        verify(exactly = 1) { preferencesManager.user }
+        verify(exactly = 1) { room.clearAllTables() }
+        verify(exactly = 1) { analytics.logoutEvent(true) }
     }
-
-}
\ No newline at end of file
+}
diff --git a/auth/build.gradle b/auth/build.gradle
index 788bb0153..02b94a587 100644
--- a/auth/build.gradle
+++ b/auth/build.gradle
@@ -55,6 +55,12 @@ android {
 dependencies {
     implementation project(path: ':core')
 
+    implementation "androidx.credentials:credentials:1.2.0"
+    implementation "androidx.credentials:credentials-play-services-auth:1.2.0"
+    implementation "com.facebook.android:facebook-login:16.2.0"
+    implementation "com.google.android.gms:play-services-auth:20.7.0"
+    implementation "com.google.android.libraries.identity.googleid:googleid:1.1.0"
+    implementation 'com.microsoft.identity.client:msal:4.9.0'
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
     androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
@@ -64,5 +70,4 @@ dependencies {
     testImplementation "io.mockk:mockk-android:$mockk_version"
     testImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:$coroutines_version"
     testImplementation "androidx.arch.core:core-testing:$android_arch_version"
-
-}
\ No newline at end of file
+}
diff --git a/auth/proguard-rules.pro b/auth/proguard-rules.pro
index 481bb4348..82ef50a20 100644
--- a/auth/proguard-rules.pro
+++ b/auth/proguard-rules.pro
@@ -18,4 +18,9 @@
 
 # If you keep the line number information, uncomment this to
 # hide the original source file name.
-#-renamesourcefileattribute SourceFile
\ No newline at end of file
+#-renamesourcefileattribute SourceFile
+
+-if class androidx.credentials.CredentialManager
+-keep class androidx.credentials.playservices.** {
+  *;
+}
diff --git a/auth/src/main/java/org/openedx/auth/data/api/AuthApi.kt b/auth/src/main/java/org/openedx/auth/data/api/AuthApi.kt
index a8ee4bcb4..903cbd62e 100644
--- a/auth/src/main/java/org/openedx/auth/data/api/AuthApi.kt
+++ b/auth/src/main/java/org/openedx/auth/data/api/AuthApi.kt
@@ -11,17 +11,25 @@ import retrofit2.http.*
 
 interface AuthApi {
 
+    @FormUrlEncoded
+    @POST(ApiConstants.URL_EXCHANGE_TOKEN)
+    suspend fun exchangeAccessToken(
+        @Field("access_token") accessToken: String,
+        @Field("client_id") clientId: String,
+        @Field("token_type") tokenType: String,
+        @Field("asymmetric_jwt") isAsymmetricJwt: Boolean = true,
+        @Path("auth_type") authType: String,
+    ): AuthResponse
+
     @FormUrlEncoded
     @POST(ApiConstants.URL_ACCESS_TOKEN)
     suspend fun getAccessToken(
-        @Field("grant_type")
-        grantType: String,
-        @Field("client_id")
-        clientId: String,
-        @Field("username")
-        username: String,
-        @Field("password")
-        password: String,
+        @Field("grant_type") grantType: String,
+        @Field("client_id") clientId: String,
+        @Field("username") username: String,
+        @Field("password") password: String,
+        @Field("token_type") tokenType: String,
+        @Field("asymmetric_jwt") isAsymmetricJwt: Boolean = true,
     ): AuthResponse
 
     @FormUrlEncoded
@@ -30,6 +38,8 @@ interface AuthApi {
         @Field("grant_type") grantType: String,
         @Field("client_id") clientId: String,
         @Field("refresh_token") refreshToken: String,
+        @Field("token_type") tokenType: String,
+        @Field("asymmetric_jwt") isAsymmetricJwt: Boolean = true,
     ): Call<AuthResponse>
 
     @GET(ApiConstants.URL_REGISTRATION_FIELDS)
diff --git a/auth/src/main/java/org/openedx/auth/data/model/AuthResponse.kt b/auth/src/main/java/org/openedx/auth/data/model/AuthResponse.kt
index 6890dcfce..64c5cf27e 100644
--- a/auth/src/main/java/org/openedx/auth/data/model/AuthResponse.kt
+++ b/auth/src/main/java/org/openedx/auth/data/model/AuthResponse.kt
@@ -1,6 +1,7 @@
 package org.openedx.auth.data.model
 
 import com.google.gson.annotations.SerializedName
+import org.openedx.auth.domain.model.AuthResponse
 
 data class AuthResponse(
     @SerializedName("access_token")
@@ -15,5 +16,15 @@ data class AuthResponse(
     var error: String?,
     @SerializedName("refresh_token")
     var refreshToken: String?,
-)
-
+) {
+    fun mapToDomain(): AuthResponse {
+        return AuthResponse(
+            accessToken = accessToken,
+            tokenType = tokenType,
+            expiresIn = expiresIn?.times(1000),
+            scope = scope,
+            error = error,
+            refreshToken = refreshToken,
+        )
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/data/model/AuthType.kt b/auth/src/main/java/org/openedx/auth/data/model/AuthType.kt
new file mode 100644
index 000000000..5addd621c
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/data/model/AuthType.kt
@@ -0,0 +1,16 @@
+package org.openedx.auth.data.model
+
+import org.openedx.core.ApiConstants
+
+/**
+ * Enum class with types of supported auth types
+ *
+ * @param postfix postfix to add to the API call
+ * @param methodName name of the login type
+ */
+enum class AuthType(val postfix: String, val methodName: String) {
+    PASSWORD("", "Password"),
+    GOOGLE(ApiConstants.AUTH_TYPE_GOOGLE, "Google"),
+    FACEBOOK(ApiConstants.AUTH_TYPE_FB, "Facebook"),
+    MICROSOFT(ApiConstants.AUTH_TYPE_MICROSOFT, "Microsoft"),
+}
diff --git a/auth/src/main/java/org/openedx/auth/data/repository/AuthRepository.kt b/auth/src/main/java/org/openedx/auth/data/repository/AuthRepository.kt
index d0eab71e4..6cf54a7f1 100644
--- a/auth/src/main/java/org/openedx/auth/data/repository/AuthRepository.kt
+++ b/auth/src/main/java/org/openedx/auth/data/repository/AuthRepository.kt
@@ -1,13 +1,17 @@
 package org.openedx.auth.data.repository
 
 import org.openedx.auth.data.api.AuthApi
+import org.openedx.auth.data.model.AuthType
 import org.openedx.auth.data.model.ValidationFields
+import org.openedx.auth.domain.model.AuthResponse
 import org.openedx.core.ApiConstants
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.RegistrationField
 import org.openedx.core.system.EdxError
 
 class AuthRepository(
+    private val config: Config,
     private val api: AuthApi,
     private val preferencesManager: CorePreferences,
 ) {
@@ -16,19 +20,27 @@ class AuthRepository(
         username: String,
         password: String,
     ) {
-        val authResponse = api.getAccessToken(
+        api.getAccessToken(
             ApiConstants.GRANT_TYPE_PASSWORD,
-            org.openedx.core.BuildConfig.CLIENT_ID,
+            config.getOAuthClientId(),
             username,
-            password
+            password,
+            config.getAccessTokenType(),
         )
-        if (authResponse.error != null) {
-            throw EdxError.UnknownException(authResponse.error!!)
-        }
-        preferencesManager.accessToken = authResponse.accessToken ?: ""
-        preferencesManager.refreshToken = authResponse.refreshToken ?: ""
-        val user = api.getProfile().mapToDomain()
-        preferencesManager.user = user
+            .mapToDomain()
+            .processAuthResponse()
+    }
+
+    suspend fun socialLogin(token: String?, authType: AuthType) {
+        if (token.isNullOrBlank()) throw IllegalArgumentException("Token is null")
+        api.exchangeAccessToken(
+            accessToken = token,
+            clientId = config.getOAuthClientId(),
+            tokenType = config.getAccessTokenType(),
+            authType = authType.postfix
+        )
+            .mapToDomain()
+            .processAuthResponse()
     }
 
     suspend fun getRegistrationFields(): List<RegistrationField> {
@@ -46,4 +58,15 @@ class AuthRepository(
     suspend fun passwordReset(email: String): Boolean {
         return api.passwordReset(email).success
     }
-}
\ No newline at end of file
+
+    private suspend fun AuthResponse.processAuthResponse() {
+        if (error != null) {
+            throw EdxError.UnknownException(error!!)
+        }
+        preferencesManager.accessToken = accessToken ?: ""
+        preferencesManager.refreshToken = refreshToken ?: ""
+        preferencesManager.accessTokenExpiresAt = getTokenExpiryTime()
+        val user = api.getProfile()
+        preferencesManager.user = user
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/domain/interactor/AuthInteractor.kt b/auth/src/main/java/org/openedx/auth/domain/interactor/AuthInteractor.kt
index 53d68fd22..00fe509af 100644
--- a/auth/src/main/java/org/openedx/auth/domain/interactor/AuthInteractor.kt
+++ b/auth/src/main/java/org/openedx/auth/domain/interactor/AuthInteractor.kt
@@ -1,5 +1,6 @@
 package org.openedx.auth.domain.interactor
 
+import org.openedx.auth.data.model.AuthType
 import org.openedx.auth.data.model.ValidationFields
 import org.openedx.auth.data.repository.AuthRepository
 import org.openedx.core.domain.model.RegistrationField
@@ -13,6 +14,10 @@ class AuthInteractor(private val repository: AuthRepository) {
         repository.login(username, password)
     }
 
+    suspend fun loginSocial(token: String?, authType: AuthType) {
+        repository.socialLogin(token, authType)
+    }
+
     suspend fun getRegistrationFields(): List<RegistrationField> {
         return repository.getRegistrationFields()
     }
diff --git a/auth/src/main/java/org/openedx/auth/domain/model/AuthResponse.kt b/auth/src/main/java/org/openedx/auth/domain/model/AuthResponse.kt
new file mode 100644
index 000000000..47c5a0cf4
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/domain/model/AuthResponse.kt
@@ -0,0 +1,19 @@
+package org.openedx.auth.domain.model
+
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+import org.openedx.core.utils.TimeUtils
+
+@Parcelize
+data class AuthResponse(
+    var accessToken: String?,
+    var tokenType: String?,
+    var expiresIn: Long?,
+    var scope: String?,
+    var error: String?,
+    var refreshToken: String?,
+) : Parcelable {
+    fun getTokenExpiryTime(): Long {
+        return (expiresIn ?: 0L) + TimeUtils.getCurrentTime()
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/domain/model/SocialAuthResponse.kt b/auth/src/main/java/org/openedx/auth/domain/model/SocialAuthResponse.kt
new file mode 100644
index 000000000..dae98fd39
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/domain/model/SocialAuthResponse.kt
@@ -0,0 +1,10 @@
+package org.openedx.auth.domain.model
+
+import org.openedx.auth.data.model.AuthType
+
+data class SocialAuthResponse(
+    var accessToken: String = "",
+    var name: String = "",
+    var email: String = "",
+    var authType: AuthType = AuthType.PASSWORD,
+)
diff --git a/auth/src/main/java/org/openedx/auth/presentation/AuthRouter.kt b/auth/src/main/java/org/openedx/auth/presentation/AuthRouter.kt
index 1db5b98c1..ff73b7a44 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/AuthRouter.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/AuthRouter.kt
@@ -4,10 +4,19 @@ import androidx.fragment.app.FragmentManager
 
 interface AuthRouter {
 
-    fun navigateToMain(fm: FragmentManager)
+    fun navigateToMain(fm: FragmentManager, courseId: String?)
 
-    fun navigateToSignUp(fm: FragmentManager)
+    fun navigateToSignIn(fm: FragmentManager, courseId: String?)
+
+    fun navigateToLogistration(fm: FragmentManager, courseId: String?)
+
+    fun navigateToSignUp(fm: FragmentManager, courseId: String?)
 
     fun navigateToRestorePassword(fm: FragmentManager)
 
-}
\ No newline at end of file
+    fun navigateToWhatsNew(fm: FragmentManager, courseId: String? = null)
+
+    fun navigateToDiscoverCourses(fm: FragmentManager, querySearch: String)
+
+    fun clearBackStack(fm: FragmentManager)
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/logistration/LogistrationFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/logistration/LogistrationFragment.kt
new file mode 100644
index 000000000..6379b246c
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/logistration/LogistrationFragment.kt
@@ -0,0 +1,202 @@
+package org.openedx.auth.presentation.logistration
+
+import android.content.res.Configuration
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.openedx.auth.R
+import org.openedx.auth.presentation.AuthRouter
+import org.openedx.core.ui.AuthButtonsPanel
+import org.openedx.core.ui.SearchBar
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.noRippleClickable
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.theme.compose.LogistrationLogoView
+
+class LogistrationFragment : Fragment() {
+
+    private val router: AuthRouter by inject()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val courseId = arguments?.getString(ARG_COURSE_ID, "")
+                LogistrationScreen(
+                    onSignInClick = {
+                        router.navigateToSignIn(parentFragmentManager, courseId)
+                    },
+                    onRegisterClick = {
+                        router.navigateToSignUp(parentFragmentManager, courseId)
+                    },
+                    onSearchClick = { querySearch ->
+                        router.navigateToDiscoverCourses(parentFragmentManager, querySearch)
+                    }
+                )
+            }
+        }
+    }
+
+    companion object {
+        private const val ARG_COURSE_ID = "courseId"
+        fun newInstance(courseId: String?): LogistrationFragment {
+            val fragment = LogistrationFragment()
+            fragment.arguments = bundleOf(
+                ARG_COURSE_ID to courseId
+            )
+            return fragment
+        }
+    }
+}
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+private fun LogistrationScreen(
+    onSearchClick: (String) -> Unit,
+    onRegisterClick: () -> Unit,
+    onSignInClick: () -> Unit,
+) {
+
+    var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(TextFieldValue(""))
+    }
+    val scaffoldState = rememberScaffoldState()
+    val scrollState = rememberScrollState()
+    Scaffold(
+        scaffoldState = scaffoldState,
+        modifier = Modifier
+            .semantics {
+                testTagsAsResourceId = true
+            }
+            .fillMaxSize()
+            .navigationBarsPadding(),
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+        Surface(
+            modifier = Modifier
+                .padding(it)
+                .fillMaxSize()
+                .verticalScroll(scrollState)
+                .displayCutoutForLandscape(),
+            color = MaterialTheme.appColors.background
+        ) {
+            Column(
+                modifier = Modifier.padding(
+                    horizontal = 16.dp,
+                    vertical = 32.dp,
+                )
+            ) {
+                LogistrationLogoView()
+                Text(
+                    text = stringResource(id = R.string.pre_auth_title),
+                    color = MaterialTheme.appColors.textPrimary,
+                    style = MaterialTheme.appTypography.headlineSmall,
+                    modifier = Modifier
+                        .testTag("txt_screen_title")
+                        .padding(bottom = 40.dp)
+                )
+                val focusManager = LocalFocusManager.current
+                Column(Modifier.padding(bottom = 8.dp)) {
+                    Text(
+                        modifier = Modifier
+                            .testTag("txt_search_label")
+                            .padding(bottom = 10.dp),
+                        style = MaterialTheme.appTypography.titleMedium,
+                        text = stringResource(id = R.string.pre_auth_search_title),
+                    )
+                    SearchBar(
+                        modifier = Modifier
+                            .testTag("tf_discovery_search")
+                            .fillMaxWidth()
+                            .height(48.dp),
+                        label = stringResource(id = R.string.pre_auth_search_hint),
+                        requestFocus = false,
+                        searchValue = textFieldValue,
+                        keyboardActions = {
+                            focusManager.clearFocus()
+                            onSearchClick(textFieldValue.text)
+                        },
+                        onValueChanged = { text ->
+                            textFieldValue = text
+                        },
+                        onClearValue = {
+                            textFieldValue = TextFieldValue("")
+                        }
+                    )
+                }
+
+                Text(
+                    modifier = Modifier
+                        .testTag("txt_explore_all_courses")
+                        .padding(bottom = 32.dp)
+                        .noRippleClickable {
+                            onSearchClick("")
+                        },
+                    text = stringResource(id = R.string.pre_auth_explore_all_courses),
+                    color = MaterialTheme.appColors.primary,
+                    style = MaterialTheme.appTypography.labelLarge
+                )
+
+                Spacer(modifier = Modifier.weight(1f))
+
+                AuthButtonsPanel(onRegisterClick = onRegisterClick, onSignInClick = onSignInClick)
+            }
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_9_Night", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun LogistrationPreview() {
+    OpenEdXTheme {
+        LogistrationScreen(
+            onSearchClick = {},
+            onSignInClick = {},
+            onRegisterClick = {}
+        )
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt
index 014b233d8..dd530bfa0 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordFragment.kt
@@ -6,21 +6,46 @@ import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.*
-import androidx.compose.runtime.*
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Devices
@@ -28,14 +53,25 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.Fragment
+import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.auth.presentation.ui.LoginTextField
+import org.openedx.core.AppUpdateState
+import org.openedx.core.R
 import org.openedx.core.UIMessage
-import org.openedx.core.ui.*
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRequiredScreen
+import org.openedx.core.ui.BackBtn
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
-import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.core.ui.windowSizeValue
 import org.openedx.auth.R as authR
 
 class RestorePasswordFragment : Fragment() {
@@ -54,22 +90,33 @@ class RestorePasswordFragment : Fragment() {
 
                 val uiState by viewModel.uiState.observeAsState(RestorePasswordUIState.Initial)
                 val uiMessage by viewModel.uiMessage.observeAsState()
-                RestorePasswordScreen(
-                    windowSize = windowSize,
-                    uiState = uiState,
-                    uiMessage = uiMessage,
-                    onBackClick = {
-                        requireActivity().supportFragmentManager.popBackStackImmediate()
-                    },
-                    onRestoreButtonClick = {
-                        viewModel.passwordReset(it)
-                    }
-                )
+                val appUpgradeEvent by viewModel.appUpgradeEventUIState.observeAsState(null)
+
+                if (appUpgradeEvent == null) {
+                    RestorePasswordScreen(
+                        windowSize = windowSize,
+                        uiState = uiState,
+                        uiMessage = uiMessage,
+                        onBackClick = {
+                            requireActivity().supportFragmentManager.popBackStackImmediate()
+                        },
+                        onRestoreButtonClick = {
+                            viewModel.passwordReset(it)
+                        }
+                    )
+                } else {
+                    AppUpgradeRequiredScreen(
+                        onUpdateClick = {
+                            AppUpdateState.openPlayMarket(requireContext())
+                        }
+                    )
+                }
             }
         }
     }
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun RestorePasswordScreen(
     windowSize: WindowSize,
@@ -87,6 +134,9 @@ private fun RestorePasswordScreen(
     Scaffold(
         scaffoldState = scaffoldState,
         modifier = Modifier
+            .semantics {
+                testTagsAsResourceId = true
+            }
             .fillMaxSize()
             .navigationBarsPadding(),
         backgroundColor = MaterialTheme.appColors.background
@@ -158,6 +208,7 @@ private fun RestorePasswordScreen(
             ) {
                 Text(
                     modifier = Modifier
+                        .testTag("txt_screen_title")
                         .fillMaxWidth(),
                     text = stringResource(id = authR.string.auth_forgot_your_password),
                     color = Color.White,
@@ -174,8 +225,7 @@ private fun RestorePasswordScreen(
             }
 
             Surface(
-                modifier = Modifier
-                    .fillMaxWidth(),
+                modifier = Modifier.fillMaxWidth(),
                 color = MaterialTheme.appColors.background,
                 shape = MaterialTheme.appShapes.screenBackgroundShape
             ) {
@@ -191,11 +241,13 @@ private fun RestorePasswordScreen(
                             Column(
                                 Modifier
                                     .then(contentPaddings)
+                                    .displayCutoutForLandscape()
                                     .fillMaxWidth(),
                                 horizontalAlignment = Alignment.CenterHorizontally
                             ) {
                                 Text(
                                     modifier = Modifier
+                                        .testTag("txt_forgot_password_title")
                                         .fillMaxWidth(),
                                     text = stringResource(id = authR.string.auth_forgot_your_password),
                                     style = MaterialTheme.appTypography.displaySmall,
@@ -204,6 +256,7 @@ private fun RestorePasswordScreen(
                                 Spacer(Modifier.height(2.dp))
                                 Text(
                                     modifier = Modifier
+                                        .testTag("txt_forgot_password_description")
                                         .fillMaxWidth(),
                                     text = stringResource(id = authR.string.auth_please_enter_your_log_in),
                                     style = MaterialTheme.appTypography.titleSmall,
@@ -212,6 +265,8 @@ private fun RestorePasswordScreen(
                                 Spacer(modifier = Modifier.height(32.dp))
                                 LoginTextField(
                                     modifier = Modifier.fillMaxWidth(),
+                                    title = stringResource(id = authR.string.auth_email),
+                                    description = stringResource(id = authR.string.auth_example_email),
                                     onValueChanged = {
                                         email = it
                                     },
@@ -234,7 +289,7 @@ private fun RestorePasswordScreen(
                                     }
                                 } else {
                                     OpenEdXButton(
-                                        width = buttonWidth,
+                                        width = buttonWidth.testTag("btn_reset_password"),
                                         text = stringResource(id = authR.string.auth_reset_password),
                                         onClick = {
                                             onRestoreButtonClick(email)
@@ -243,10 +298,12 @@ private fun RestorePasswordScreen(
                                 }
                             }
                         }
+
                         is RestorePasswordUIState.Success -> {
                             Column(
                                 Modifier
                                     .then(contentPaddings)
+                                    .displayCutoutForLandscape()
                                     .fillMaxSize(),
                                 verticalArrangement = Arrangement.Center,
                                 horizontalAlignment = Alignment.CenterHorizontally
@@ -281,7 +338,7 @@ private fun RestorePasswordScreen(
                                 Spacer(Modifier.height(48.dp))
                                 OpenEdXButton(
                                     width = buttonWidth,
-                                    text = stringResource(id = authR.string.auth_sign_in),
+                                    text = stringResource(id = R.string.core_sign_in),
                                     onClick = {
                                         onBackClick()
                                     }
diff --git a/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordViewModel.kt b/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordViewModel.kt
index e8d635e03..427f2f263 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordViewModel.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/restore/RestorePasswordViewModel.kt
@@ -3,6 +3,7 @@ package org.openedx.auth.presentation.restore
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
 import org.openedx.auth.domain.interactor.AuthInteractor
 import org.openedx.auth.presentation.AuthAnalytics
 import org.openedx.core.BaseViewModel
@@ -13,12 +14,14 @@ import org.openedx.core.extension.isEmailValid
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.EdxError
 import org.openedx.core.system.ResourceManager
-import kotlinx.coroutines.launch
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.system.notifier.AppUpgradeNotifier
 
 class RestorePasswordViewModel(
     private val interactor: AuthInteractor,
     private val resourceManager: ResourceManager,
-    private val analytics: AuthAnalytics
+    private val analytics: AuthAnalytics,
+    private val appUpgradeNotifier: AppUpgradeNotifier
 ) : BaseViewModel() {
 
     private val _uiState = MutableLiveData<RestorePasswordUIState>()
@@ -29,6 +32,14 @@ class RestorePasswordViewModel(
     val uiMessage: LiveData<UIMessage>
         get() = _uiMessage
 
+    private val _appUpgradeEvent = MutableLiveData<AppUpgradeEvent>()
+    val appUpgradeEventUIState: LiveData<AppUpgradeEvent>
+        get() = _appUpgradeEvent
+
+    init {
+        collectAppUpgradeEvent()
+    }
+
     fun passwordReset(email: String) {
         _uiState.value = RestorePasswordUIState.Loading
         viewModelScope.launch {
@@ -64,4 +75,13 @@ class RestorePasswordViewModel(
             }
         }
     }
+
+    private fun collectAppUpgradeEvent() {
+        viewModelScope.launch {
+            appUpgradeNotifier.notifier.collect { event ->
+                _appUpgradeEvent.value = event
+            }
+        }
+    }
+
 }
\ No newline at end of file
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signin/SignInFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/signin/SignInFragment.kt
index 9ea354c7f..1adcaa3a1 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/signin/SignInFragment.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/signin/SignInFragment.kt
@@ -1,54 +1,35 @@
 package org.openedx.auth.presentation.signin
 
-import android.content.res.Configuration.UI_MODE_NIGHT_NO
-import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.KeyboardActions
-import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.*
-import androidx.compose.runtime.*
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.ViewCompositionStrategy
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.input.ImeAction
-import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.text.input.PasswordVisualTransformation
-import androidx.compose.ui.text.input.TextFieldValue
-import androidx.compose.ui.tooling.preview.Devices
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
-import org.openedx.auth.R
-import org.openedx.auth.presentation.AuthRouter
-import org.openedx.auth.presentation.ui.LoginTextField
-import org.openedx.core.UIMessage
-import org.openedx.core.ui.*
-import org.openedx.core.ui.theme.OpenEdXTheme
-import org.openedx.core.ui.theme.appColors
-import org.openedx.core.ui.theme.appShapes
-import org.openedx.core.ui.theme.appTypography
 import org.koin.android.ext.android.inject
 import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.openedx.auth.data.model.AuthType
+import org.openedx.auth.presentation.AuthRouter
+import org.openedx.auth.presentation.signin.compose.LoginScreen
+import org.openedx.core.AppUpdateState
+import org.openedx.core.presentation.global.WhatsNewGlobalManager
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRequiredScreen
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.theme.OpenEdXTheme
 
 class SignInFragment : Fragment() {
 
-    private val viewModel: SignInViewModel by viewModel()
+    private val viewModel: SignInViewModel by viewModel {
+        parametersOf(requireArguments().getString(ARG_COURSE_ID, null))
+    }
     private val router: AuthRouter by inject()
+    private val whatsNewGlobalManager by inject<WhatsNewGlobalManager>()
 
     override fun onCreateView(
         inflater: LayoutInflater,
@@ -59,310 +40,79 @@ class SignInFragment : Fragment() {
         setContent {
             OpenEdXTheme {
                 val windowSize = rememberWindowSize()
-
-                val showProgress by viewModel.showProgress.observeAsState(initial = false)
+                val state by viewModel.uiState.collectAsState()
                 val uiMessage by viewModel.uiMessage.observeAsState()
-                val loginSuccess by viewModel.loginSuccess.observeAsState(initial = false)
+                val appUpgradeEvent by viewModel.appUpgradeEvent.observeAsState(null)
+
+                if (appUpgradeEvent == null) {
+                    LoginScreen(
+                        windowSize = windowSize,
+                        state = state,
+                        uiMessage = uiMessage,
+                        onEvent = { event ->
+                            when (event) {
+                                is AuthEvent.SignIn -> viewModel.login(event.login, event.password)
+                                is AuthEvent.SocialSignIn -> viewModel.socialAuth(
+                                    this@SignInFragment,
+                                    event.authType
+                                )
+
+                                AuthEvent.ForgotPasswordClick -> {
+                                    viewModel.forgotPasswordClickedEvent()
+                                    router.navigateToRestorePassword(parentFragmentManager)
+                                }
+
+                                AuthEvent.RegisterClick -> {
+                                    viewModel.signUpClickedEvent()
+                                    router.navigateToSignUp(parentFragmentManager, null)
+                                }
+
+                                AuthEvent.BackClick -> {
+                                    requireActivity().supportFragmentManager.popBackStackImmediate()
+                                }
+                            }
+                        },
+                    )
+                    LaunchedEffect(state.loginSuccess) {
+                        val isNeedToShowWhatsNew =
+                            whatsNewGlobalManager.shouldShowWhatsNew()
+                        if (state.loginSuccess) {
+                            router.clearBackStack(parentFragmentManager)
+                            if (isNeedToShowWhatsNew) {
+                                router.navigateToWhatsNew(parentFragmentManager, viewModel.courseId)
+                            } else {
+                                router.navigateToMain(parentFragmentManager, viewModel.courseId)
+                            }
+                        }
 
-                LoginScreen(
-                    windowSize = windowSize,
-                    showProgress = showProgress,
-                    uiMessage = uiMessage,
-                    onLoginClick = { login, password ->
-                        viewModel.login(login, password)
-                    },
-                    onRegisterClick = {
-                        viewModel.signUpClickedEvent()
-                        router.navigateToSignUp(parentFragmentManager)
-                    },
-                    onForgotPasswordClick = {
-                        viewModel.forgotPasswordClickedEvent()
-                        router.navigateToRestorePassword(parentFragmentManager)
-                    }
-                )
-
-                LaunchedEffect(loginSuccess) {
-                    if (loginSuccess) {
-                        router.navigateToMain(parentFragmentManager)
                     }
+                } else {
+                    AppUpgradeRequiredScreen(
+                        onUpdateClick = {
+                            AppUpdateState.openPlayMarket(requireContext())
+                        }
+                    )
                 }
             }
         }
     }
-}
 
-@Composable
-private fun LoginScreen(
-    windowSize: WindowSize,
-    showProgress: Boolean,
-    uiMessage: UIMessage?,
-    onLoginClick: (login: String, password: String) -> Unit,
-    onRegisterClick: () -> Unit,
-    onForgotPasswordClick: () -> Unit
-) {
-    val scaffoldState = rememberScaffoldState()
-    val scrollState = rememberScrollState()
-
-    Scaffold(
-        scaffoldState = scaffoldState,
-        modifier = Modifier
-            .fillMaxSize()
-            .navigationBarsPadding(),
-        backgroundColor = MaterialTheme.appColors.background
-    ) {
-
-        val contentPaddings by remember {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier
-                        .widthIn(Dp.Unspecified, 420.dp)
-                        .padding(
-                            top = 32.dp,
-                            bottom = 40.dp
-                        ),
-                    compact = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 24.dp, vertical = 28.dp)
-                )
+    companion object {
+        private const val ARG_COURSE_ID = "courseId"
+        fun newInstance(courseId: String?): SignInFragment {
+            val fragment = SignInFragment()
+            fragment.arguments = bundleOf(
+                ARG_COURSE_ID to courseId
             )
-        }
-        val buttonWidth by remember(key1 = windowSize) {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier.widthIn(232.dp, Dp.Unspecified),
-                    compact = Modifier.fillMaxWidth()
-                )
-            )
-        }
-
-        Image(
-            modifier = Modifier
-                .fillMaxWidth()
-                .fillMaxHeight(0.3f),
-            painter = painterResource(id = org.openedx.core.R.drawable.core_top_header),
-            contentScale = ContentScale.FillBounds,
-            contentDescription = null
-        )
-        HandleUIMessage(
-            uiMessage = uiMessage,
-            scaffoldState = scaffoldState
-        )
-
-        Column(
-            Modifier.padding(it),
-            horizontalAlignment = Alignment.CenterHorizontally
-        ) {
-            Box(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .fillMaxHeight(0.2f),
-                contentAlignment = Alignment.Center
-            ) {
-                Image(
-                    painter = painterResource(id = org.openedx.core.R.drawable.core_ic_logo),
-                    contentDescription = null,
-                    modifier = Modifier
-                        .padding(top = 20.dp)
-                        .width(170.dp)
-                        .height(48.dp)
-                )
-            }
-            Surface(
-                color = MaterialTheme.appColors.background,
-                shape = MaterialTheme.appShapes.screenBackgroundShape,
-                modifier = Modifier
-                    .fillMaxSize()
-            ) {
-                Box(contentAlignment = Alignment.TopCenter) {
-                    Column(
-                        modifier = Modifier
-                            .background(MaterialTheme.appColors.background)
-                            .verticalScroll(scrollState)
-                            .then(contentPaddings),
-                    ) {
-                        Text(
-                            text = stringResource(id = R.string.auth_sign_in),
-                            color = MaterialTheme.appColors.textPrimary,
-                            style = MaterialTheme.appTypography.displaySmall
-                        )
-                        Text(
-                            modifier = Modifier.padding(top = 4.dp),
-                            text = stringResource(id = R.string.auth_welcome_back),
-                            color = MaterialTheme.appColors.textPrimary,
-                            style = MaterialTheme.appTypography.titleSmall
-                        )
-                        Spacer(modifier = Modifier.height(24.dp))
-                        AuthForm(
-                            buttonWidth,
-                            showProgress,
-                            onLoginClick,
-                            onRegisterClick,
-                            onForgotPasswordClick
-                        )
-                    }
-                }
-            }
+            return fragment
         }
     }
 }
 
-@Composable
-private fun AuthForm(
-    buttonWidth: Modifier,
-    isLoading: Boolean = false,
-    onLoginClick: (login: String, password: String) -> Unit,
-    onRegisterClick: () -> Unit,
-    onForgotPasswordClick: () -> Unit
-) {
-    var login by rememberSaveable { mutableStateOf("") }
-    var password by rememberSaveable { mutableStateOf("") }
-
-    Column(horizontalAlignment = Alignment.CenterHorizontally) {
-        LoginTextField(
-            modifier = Modifier
-                .fillMaxWidth(),
-            onValueChanged = {
-                login = it
-            })
-
-        Spacer(modifier = Modifier.height(18.dp))
-        PasswordTextField(
-            modifier = Modifier
-                .fillMaxWidth(),
-            onValueChanged = {
-                password = it
-            },
-            onPressDone = {
-                onLoginClick(login, password)
-            }
-        )
-
-        Row(
-            Modifier
-                .fillMaxWidth()
-                .padding(top = 20.dp, bottom = 36.dp)
-        ) {
-            Text(
-                modifier = Modifier.noRippleClickable {
-                    onRegisterClick()
-                },
-                text = stringResource(id = R.string.auth_register),
-                color = MaterialTheme.appColors.primary,
-                style = MaterialTheme.appTypography.labelLarge
-            )
-            Spacer(modifier = Modifier.weight(1f))
-            Text(
-                modifier = Modifier.noRippleClickable {
-                    onForgotPasswordClick()
-                },
-                text = stringResource(id = R.string.auth_forgot_password),
-                color = MaterialTheme.appColors.primary,
-                style = MaterialTheme.appTypography.labelLarge
-            )
-        }
-
-        if (isLoading) {
-            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-        } else {
-            OpenEdXButton(
-                width = buttonWidth,
-                text = stringResource(id = R.string.auth_sign_in),
-                onClick = {
-                    onLoginClick(login, password)
-                }
-            )
-        }
-    }
-}
-
-
-@Composable
-private fun PasswordTextField(
-    modifier: Modifier = Modifier,
-    onValueChanged: (String) -> Unit,
-    onPressDone: () -> Unit,
-) {
-    var passwordTextFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-        mutableStateOf(
-            TextFieldValue("")
-        )
-    }
-    val focusManager = LocalFocusManager.current
-    Text(
-        modifier = Modifier.fillMaxWidth(),
-        text = stringResource(id = org.openedx.core.R.string.core_password),
-        color = MaterialTheme.appColors.textPrimary,
-        style = MaterialTheme.appTypography.labelLarge
-    )
-    Spacer(modifier = Modifier.height(8.dp))
-    OutlinedTextField(
-        modifier = modifier,
-        value = passwordTextFieldValue,
-        onValueChange = {
-            passwordTextFieldValue = it
-            onValueChanged(it.text.trim())
-        },
-        colors = TextFieldDefaults.outlinedTextFieldColors(
-            unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
-            backgroundColor = MaterialTheme.appColors.textFieldBackground
-        ),
-        shape = MaterialTheme.appShapes.textFieldShape,
-        placeholder = {
-            Text(
-                text = stringResource(id = R.string.auth_enter_password),
-                color = MaterialTheme.appColors.textFieldHint,
-                style = MaterialTheme.appTypography.bodyMedium
-            )
-        },
-        keyboardOptions = KeyboardOptions.Default.copy(
-            keyboardType = KeyboardType.Password,
-            imeAction = ImeAction.Done
-        ),
-        visualTransformation = PasswordVisualTransformation(),
-        keyboardActions = KeyboardActions {
-            focusManager.clearFocus()
-            onPressDone()
-        },
-        textStyle = MaterialTheme.appTypography.bodyMedium,
-        singleLine = true
-    )
+internal sealed interface AuthEvent {
+    data class SignIn(val login: String, val password: String) : AuthEvent
+    data class SocialSignIn(val authType: AuthType) : AuthEvent
+    object RegisterClick : AuthEvent
+    object ForgotPasswordClick : AuthEvent
+    object BackClick : AuthEvent
 }
-
-@Preview(uiMode = UI_MODE_NIGHT_NO)
-@Preview(uiMode = UI_MODE_NIGHT_YES)
-@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_NO)
-@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_YES)
-@Composable
-private fun SignInScreenPreview() {
-    OpenEdXTheme {
-        LoginScreen(
-            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-            showProgress = false,
-            uiMessage = null,
-            onLoginClick = { _, _ ->
-
-            },
-            onRegisterClick = {},
-            onForgotPasswordClick = {}
-        )
-    }
-}
-
-
-@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_NO)
-@Preview(name = "NEXUS_9_Night", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_YES)
-@Composable
-private fun SignInScreenTabletPreview() {
-    OpenEdXTheme {
-        LoginScreen(
-            windowSize = WindowSize(WindowType.Expanded, WindowType.Expanded),
-            showProgress = false,
-            uiMessage = null,
-            onLoginClick = { _, _ ->
-
-            },
-            onRegisterClick = {},
-            onForgotPasswordClick = {}
-        )
-    }
-}
\ No newline at end of file
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signin/SignInUIState.kt b/auth/src/main/java/org/openedx/auth/presentation/signin/SignInUIState.kt
new file mode 100644
index 000000000..829d376f1
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/signin/SignInUIState.kt
@@ -0,0 +1,21 @@
+package org.openedx.auth.presentation.signin
+
+/**
+ * Data class to store UI state of the SignIn screen
+ *
+ * @param isFacebookAuthEnabled is Facebook auth enabled
+ * @param isGoogleAuthEnabled is Google auth enabled
+ * @param isMicrosoftAuthEnabled is Microsoft auth enabled
+ * @param isSocialAuthEnabled is OAuth buttons visible
+ * @param showProgress is progress visible
+ * @param loginSuccess is login succeed
+ */
+internal data class SignInUIState(
+    val isFacebookAuthEnabled: Boolean = false,
+    val isGoogleAuthEnabled: Boolean = false,
+    val isMicrosoftAuthEnabled: Boolean = false,
+    val isSocialAuthEnabled: Boolean = false,
+    val isLogistrationEnabled: Boolean = false,
+    val showProgress: Boolean = false,
+    val loginSuccess: Boolean = false,
+)
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signin/SignInViewModel.kt b/auth/src/main/java/org/openedx/auth/presentation/signin/SignInViewModel.kt
index d9ca3bed5..e5532429b 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/signin/SignInViewModel.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/signin/SignInViewModel.kt
@@ -1,20 +1,33 @@
 package org.openedx.auth.presentation.signin
 
+import androidx.fragment.app.Fragment
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
 import org.openedx.auth.R
+import org.openedx.auth.data.model.AuthType
 import org.openedx.auth.domain.interactor.AuthInteractor
+import org.openedx.auth.domain.model.SocialAuthResponse
 import org.openedx.auth.presentation.AuthAnalytics
+import org.openedx.auth.presentation.sso.OAuthHelper
 import org.openedx.core.BaseViewModel
 import org.openedx.core.SingleEventLiveData
 import org.openedx.core.UIMessage
 import org.openedx.core.Validator
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.EdxError
 import org.openedx.core.system.ResourceManager
-import kotlinx.coroutines.launch
-import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.system.notifier.AppUpgradeNotifier
+import org.openedx.core.utils.Logger
 import org.openedx.core.R as CoreRes
 
 class SignInViewModel(
@@ -22,25 +35,42 @@ class SignInViewModel(
     private val resourceManager: ResourceManager,
     private val preferencesManager: CorePreferences,
     private val validator: Validator,
-    private val analytics: AuthAnalytics
+    private val appUpgradeNotifier: AppUpgradeNotifier,
+    private val analytics: AuthAnalytics,
+    private val oAuthHelper: OAuthHelper,
+    config: Config,
+    val courseId: String?,
 ) : BaseViewModel() {
 
-    private val _showProgress = MutableLiveData<Boolean>()
-    val showProgress: LiveData<Boolean>
-        get() = _showProgress
+    private val logger = Logger("SignInViewModel")
+
+    private val _uiState = MutableStateFlow(
+        SignInUIState(
+            isFacebookAuthEnabled = config.getFacebookConfig().isEnabled(),
+            isGoogleAuthEnabled = config.getGoogleConfig().isEnabled(),
+            isMicrosoftAuthEnabled = config.getMicrosoftConfig().isEnabled(),
+            isSocialAuthEnabled = config.isSocialAuthEnabled(),
+            isLogistrationEnabled = config.isPreLoginExperienceEnabled(),
+        )
+    )
+    internal val uiState: StateFlow<SignInUIState> = _uiState
 
     private val _uiMessage = SingleEventLiveData<UIMessage>()
     val uiMessage: LiveData<UIMessage>
         get() = _uiMessage
 
-    private val _loginSuccess = SingleEventLiveData<Boolean>()
-    val loginSuccess: LiveData<Boolean>
-        get() = _loginSuccess
+    private val _appUpgradeEvent = MutableLiveData<AppUpgradeEvent>()
+    val appUpgradeEvent: LiveData<AppUpgradeEvent>
+        get() = _appUpgradeEvent
+
+    init {
+        collectAppUpgradeEvent()
+    }
 
     fun login(username: String, password: String) {
-        if (!validator.isEmailValid(username)) {
+        if (!validator.isEmailOrUserNameValid(username)) {
             _uiMessage.value =
-                UIMessage.SnackBarMessage(resourceManager.getString(R.string.auth_invalid_email))
+                UIMessage.SnackBarMessage(resourceManager.getString(R.string.auth_invalid_email_username))
             return
         }
         if (!validator.isPasswordValid(password)) {
@@ -49,13 +79,13 @@ class SignInViewModel(
             return
         }
 
-        _showProgress.value = true
+        _uiState.update { it.copy(showProgress = true) }
         viewModelScope.launch {
             try {
                 interactor.login(username, password)
-                _loginSuccess.value = true
+                _uiState.update { it.copy(loginSuccess = true) }
                 setUserId()
-                analytics.userLoginEvent(LoginMethod.PASSWORD.methodName)
+                analytics.userLoginEvent(AuthType.PASSWORD.methodName)
             } catch (e: Exception) {
                 if (e is EdxError.InvalidGrantException) {
                     _uiMessage.value =
@@ -68,7 +98,28 @@ class SignInViewModel(
                         UIMessage.SnackBarMessage(resourceManager.getString(CoreRes.string.core_error_unknown_error))
                 }
             }
-            _showProgress.value = false
+            _uiState.update { it.copy(showProgress = false) }
+        }
+    }
+
+    private fun collectAppUpgradeEvent() {
+        viewModelScope.launch {
+            appUpgradeNotifier.notifier.collect { event ->
+                _appUpgradeEvent.value = event
+            }
+        }
+    }
+
+    fun socialAuth(fragment: Fragment, authType: AuthType) {
+        _uiState.update { it.copy(showProgress = true) }
+        viewModelScope.launch {
+            withContext(Dispatchers.IO) {
+                runCatching {
+                    oAuthHelper.socialAuth(fragment, authType)
+                }
+            }
+                .getOrNull()
+                .checkToken()
         }
     }
 
@@ -80,17 +131,49 @@ class SignInViewModel(
         analytics.forgotPasswordClickedEvent()
     }
 
+    override fun onCleared() {
+        super.onCleared()
+        oAuthHelper.clear()
+    }
+
+    private suspend fun exchangeToken(token: String, authType: AuthType) {
+        runCatching {
+            interactor.loginSocial(token, authType)
+        }.onFailure { error ->
+            logger.e { "Social login error: $error" }
+            onUnknownError()
+        }.onSuccess {
+            logger.d { "Social login (${authType.methodName}) success" }
+            _uiState.update { it.copy(loginSuccess = true) }
+            setUserId()
+            analytics.userLoginEvent(authType.methodName)
+            _uiState.update { it.copy(showProgress = false) }
+        }
+    }
+
+    private fun onUnknownError(message: (() -> String)? = null) {
+        message?.let {
+            logger.e { it() }
+        }
+        _uiMessage.value = UIMessage.SnackBarMessage(
+            resourceManager.getString(CoreRes.string.core_error_unknown_error)
+        )
+        _uiState.update { it.copy(showProgress = false) }
+    }
+
     private fun setUserId() {
         preferencesManager.user?.let {
             analytics.setUserIdForSession(it.id)
         }
     }
-}
 
-private enum class LoginMethod(val methodName: String) {
-    PASSWORD("Password"),
-    FACEBOOK("Facebook"),
-    GOOGLE("Google"),
-    MICROSOFT("Microsoft")
+    private suspend fun SocialAuthResponse?.checkToken() {
+        this?.accessToken?.let { token ->
+            if (token.isNotEmpty()) {
+                exchangeToken(token, authType)
+            } else {
+                _uiState.update { it.copy(showProgress = false) }
+            }
+        } ?: onUnknownError()
+    }
 }
-
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signin/compose/SignInView.kt b/auth/src/main/java/org/openedx/auth/presentation/signin/compose/SignInView.kt
new file mode 100644
index 000000000..0abcf0bf9
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/signin/compose/SignInView.kt
@@ -0,0 +1,370 @@
+package org.openedx.auth.presentation.signin.compose
+
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.TextFieldDefaults
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.openedx.auth.R
+import org.openedx.auth.presentation.signin.AuthEvent
+import org.openedx.auth.presentation.signin.SignInUIState
+import org.openedx.auth.presentation.ui.LoginTextField
+import org.openedx.auth.presentation.ui.SocialAuthView
+import org.openedx.core.UIMessage
+import org.openedx.core.ui.BackBtn
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.noRippleClickable
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.theme.compose.SignInLogoView
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.core.R as coreR
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+internal fun LoginScreen(
+    windowSize: WindowSize,
+    state: SignInUIState,
+    uiMessage: UIMessage?,
+    onEvent: (AuthEvent) -> Unit,
+) {
+    val scaffoldState = rememberScaffoldState()
+    val scrollState = rememberScrollState()
+
+    Scaffold(
+        scaffoldState = scaffoldState,
+        modifier = Modifier
+            .semantics {
+                testTagsAsResourceId = true
+            }
+            .fillMaxSize()
+            .navigationBarsPadding(),
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+        val contentPaddings by remember {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier
+                        .widthIn(Dp.Unspecified, 420.dp)
+                        .padding(
+                            top = 32.dp,
+                            bottom = 40.dp
+                        ),
+                    compact = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 24.dp, vertical = 28.dp)
+                )
+            )
+        }
+        val buttonWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier.widthIn(232.dp, Dp.Unspecified),
+                    compact = Modifier.fillMaxWidth()
+                )
+            )
+        }
+
+        Image(
+            modifier = Modifier
+                .fillMaxWidth()
+                .fillMaxHeight(0.3f),
+            painter = painterResource(id = coreR.drawable.core_top_header),
+            contentScale = ContentScale.FillBounds,
+            contentDescription = null
+        )
+        HandleUIMessage(
+            uiMessage = uiMessage,
+            scaffoldState = scaffoldState
+        )
+        if (state.isLogistrationEnabled) {
+            Box(
+                modifier = Modifier
+                    .statusBarsPadding()
+                    .fillMaxWidth(),
+                contentAlignment = Alignment.CenterStart
+            ) {
+                BackBtn(
+                    modifier = Modifier.padding(end = 16.dp),
+                    tint = Color.White
+                ) {
+                    onEvent(AuthEvent.BackClick)
+                }
+            }
+        }
+        Column(
+            Modifier.padding(it),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            SignInLogoView()
+            Surface(
+                color = MaterialTheme.appColors.background,
+                shape = MaterialTheme.appShapes.screenBackgroundShape,
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+                Box(contentAlignment = Alignment.TopCenter) {
+                    Column(
+                        modifier = Modifier
+                            .background(MaterialTheme.appColors.background)
+                            .verticalScroll(scrollState)
+                            .displayCutoutForLandscape()
+                            .then(contentPaddings),
+                    ) {
+                        Text(
+                            modifier = Modifier.testTag("txt_sign_in_title"),
+                            text = stringResource(id = coreR.string.core_sign_in),
+                            color = MaterialTheme.appColors.textPrimary,
+                            style = MaterialTheme.appTypography.displaySmall
+                        )
+                        Text(
+                            modifier = Modifier
+                                .testTag("txt_sign_in_description")
+                                .padding(top = 4.dp),
+                            text = stringResource(id = R.string.auth_welcome_back),
+                            color = MaterialTheme.appColors.textPrimary,
+                            style = MaterialTheme.appTypography.titleSmall
+                        )
+                        Spacer(modifier = Modifier.height(24.dp))
+                        AuthForm(
+                            buttonWidth,
+                            state,
+                            onEvent,
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun AuthForm(
+    buttonWidth: Modifier,
+    state: SignInUIState,
+    onEvent: (AuthEvent) -> Unit,
+) {
+    var login by rememberSaveable { mutableStateOf("") }
+    var password by rememberSaveable { mutableStateOf("") }
+
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        LoginTextField(
+            modifier = Modifier
+                .fillMaxWidth(),
+            title = stringResource(id = R.string.auth_email_username),
+            description = stringResource(id = R.string.auth_enter_email_username),
+            onValueChanged = {
+                login = it
+            })
+
+        Spacer(modifier = Modifier.height(18.dp))
+        PasswordTextField(
+            modifier = Modifier
+                .fillMaxWidth(),
+            onValueChanged = {
+                password = it
+            },
+            onPressDone = {
+                onEvent(AuthEvent.SignIn(login = login, password = password))
+            }
+        )
+
+        Row(
+            Modifier
+                .fillMaxWidth()
+                .padding(top = 20.dp, bottom = 36.dp)
+        ) {
+            if (state.isLogistrationEnabled.not()) {
+                Text(
+                    modifier = Modifier
+                        .testTag("txt_register")
+                        .noRippleClickable {
+                            onEvent(AuthEvent.RegisterClick)
+                        },
+                    text = stringResource(id = coreR.string.core_register),
+                    color = MaterialTheme.appColors.primary,
+                    style = MaterialTheme.appTypography.labelLarge
+                )
+            }
+            Spacer(modifier = Modifier.weight(1f))
+            Text(
+                modifier = Modifier
+                    .testTag("txt_forgot_password")
+                    .noRippleClickable {
+                        onEvent(AuthEvent.ForgotPasswordClick)
+                    },
+                text = stringResource(id = R.string.auth_forgot_password),
+                color = MaterialTheme.appColors.primary,
+                style = MaterialTheme.appTypography.labelLarge
+            )
+        }
+
+        if (state.showProgress) {
+            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+        } else {
+            OpenEdXButton(
+                width = buttonWidth.testTag("btn_sign_in"),
+                text = stringResource(id = coreR.string.core_sign_in),
+                onClick = {
+                    onEvent(AuthEvent.SignIn(login = login, password = password))
+                }
+            )
+        }
+        if (state.isSocialAuthEnabled) {
+            SocialAuthView(
+                modifier = buttonWidth,
+                isGoogleAuthEnabled = state.isGoogleAuthEnabled,
+                isFacebookAuthEnabled = state.isFacebookAuthEnabled,
+                isMicrosoftAuthEnabled = state.isMicrosoftAuthEnabled,
+                isSignIn = true,
+            ) {
+                onEvent(AuthEvent.SocialSignIn(it))
+            }
+        }
+    }
+}
+
+@Composable
+private fun PasswordTextField(
+    modifier: Modifier = Modifier,
+    onValueChanged: (String) -> Unit,
+    onPressDone: () -> Unit,
+) {
+    var passwordTextFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(
+            TextFieldValue("")
+        )
+    }
+    val focusManager = LocalFocusManager.current
+    Text(
+        modifier = Modifier
+            .testTag("txt_password_label")
+            .fillMaxWidth(),
+        text = stringResource(id = coreR.string.core_password),
+        color = MaterialTheme.appColors.textPrimary,
+        style = MaterialTheme.appTypography.labelLarge
+    )
+    Spacer(modifier = Modifier.height(8.dp))
+    OutlinedTextField(
+        modifier = modifier.testTag("tf_password"),
+        value = passwordTextFieldValue,
+        onValueChange = {
+            passwordTextFieldValue = it
+            onValueChanged(it.text.trim())
+        },
+        colors = TextFieldDefaults.outlinedTextFieldColors(
+            unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
+            backgroundColor = MaterialTheme.appColors.textFieldBackground
+        ),
+        shape = MaterialTheme.appShapes.textFieldShape,
+        placeholder = {
+            Text(
+                modifier = Modifier.testTag("txt_password_placeholder"),
+                text = stringResource(id = R.string.auth_enter_password),
+                color = MaterialTheme.appColors.textFieldHint,
+                style = MaterialTheme.appTypography.bodyMedium
+            )
+        },
+        keyboardOptions = KeyboardOptions.Default.copy(
+            keyboardType = KeyboardType.Password,
+            imeAction = ImeAction.Done
+        ),
+        visualTransformation = PasswordVisualTransformation(),
+        keyboardActions = KeyboardActions {
+            focusManager.clearFocus()
+            onPressDone()
+        },
+        textStyle = MaterialTheme.appTypography.bodyMedium,
+        singleLine = true
+    )
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun SignInScreenPreview() {
+    OpenEdXTheme {
+        LoginScreen(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            state = SignInUIState(),
+            uiMessage = null,
+            onEvent = {},
+        )
+    }
+}
+
+
+@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_9_Night", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun SignInScreenTabletPreview() {
+    OpenEdXTheme {
+        LoginScreen(
+            windowSize = WindowSize(WindowType.Expanded, WindowType.Expanded),
+            state = SignInUIState().copy(
+                isSocialAuthEnabled = true,
+                isFacebookAuthEnabled = true,
+                isGoogleAuthEnabled = true,
+                isMicrosoftAuthEnabled = true,
+            ),
+            uiMessage = null,
+            onEvent = {},
+        )
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpFragment.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpFragment.kt
index 59a25fca0..97bfe45d9 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpFragment.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpFragment.kt
@@ -1,57 +1,31 @@
-@file:OptIn(ExperimentalComposeUiApi::class, ExperimentalComposeUiApi::class)
-
 package org.openedx.auth.presentation.signup
 
-import android.content.res.Configuration
-import android.content.res.Configuration.ORIENTATION_PORTRAIT
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.*
-import androidx.compose.runtime.*
-import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.hapticfeedback.HapticFeedbackType
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.*
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.input.TextFieldValue
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Devices
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
-import org.openedx.auth.presentation.AuthRouter
-import org.openedx.auth.presentation.ui.ExpandableText
-import org.openedx.auth.presentation.ui.OptionalFields
-import org.openedx.auth.presentation.ui.RequiredFields
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.RegistrationField
-import org.openedx.core.domain.model.RegistrationFieldType
-import org.openedx.core.ui.*
-import org.openedx.core.ui.theme.*
-import kotlinx.coroutines.launch
 import org.koin.android.ext.android.inject
 import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.openedx.auth.data.model.AuthType
+import org.openedx.auth.presentation.AuthRouter
+import org.openedx.auth.presentation.signup.compose.SignUpView
+import org.openedx.core.AppUpdateState
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRequiredScreen
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.theme.OpenEdXTheme
 
 class SignUpFragment : Fragment() {
 
-    private val viewModel by viewModel<SignUpViewModel>()
+    private val viewModel by viewModel<SignUpViewModel> {
+        parametersOf(requireArguments().getString(ARG_COURSE_ID, ""))
+    }
     private val router by inject<AuthRouter>()
 
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -69,413 +43,58 @@ class SignUpFragment : Fragment() {
             OpenEdXTheme {
                 val windowSize = rememberWindowSize()
 
-                val uiState by viewModel.uiState.observeAsState()
-                val uiMessage by viewModel.uiMessage.observeAsState()
-                val isButtonClicked by viewModel.isButtonLoading.observeAsState(false)
-                val successLogin by viewModel.successLogin.observeAsState()
-                val validationError by viewModel.validationError.observeAsState(false)
-
-                RegistrationScreen(
-                    windowSize = windowSize,
-                    uiState = uiState!!,
-                    uiMessage = uiMessage,
-                    isButtonClicked = isButtonClicked,
-                    validationError,
-                    onBackClick = {
-                        requireActivity().supportFragmentManager.popBackStackImmediate()
-                    },
-                    onRegisterClick = { map ->
-                        viewModel.register(map.mapValues { it.value ?: "" })
-                    }
-                )
-
-                LaunchedEffect(successLogin) {
-                    if (successLogin == true) {
-                        router.navigateToMain(parentFragmentManager)
-                    }
-                }
-            }
-        }
-    }
-}
-
-@OptIn(ExperimentalMaterialApi::class, ExperimentalComposeUiApi::class)
-@Composable
-internal fun RegistrationScreen(
-    windowSize: WindowSize,
-    uiState: SignUpUIState,
-    uiMessage: UIMessage?,
-    isButtonClicked: Boolean,
-    validationError: Boolean,
-    onBackClick: () -> Unit,
-    onRegisterClick: (Map<String, String?>) -> Unit
-) {
-    val scaffoldState = rememberScaffoldState()
-    val configuration = LocalConfiguration.current
-    val focusManager = LocalFocusManager.current
-    val bottomSheetScaffoldState = rememberModalBottomSheetState(
-        initialValue = ModalBottomSheetValue.Hidden,
-        skipHalfExpanded = true
-    )
-    val coroutine = rememberCoroutineScope()
-    val keyboardController = LocalSoftwareKeyboardController.current
-    var expandedList by rememberSaveable {
-        mutableStateOf(emptyList<RegistrationField.Option>())
-    }
-    val selectableNamesMap = rememberSaveableMap {
-        mutableStateMapOf<String, String?>()
-    }
-    val serverFieldName = rememberSaveable {
-        mutableStateOf("")
-    }
-    var showOptionalFields by rememberSaveable {
-        mutableStateOf(false)
-    }
-    val mapFields = rememberSaveableMap {
-        mutableStateMapOf<String, String?>()
-    }
-    val showErrorMap = rememberSaveableMap {
-        mutableStateMapOf<String, Boolean?>()
-    }
-    val scrollState = rememberScrollState()
-
-    val haptic = LocalHapticFeedback.current
-
-    val listState = rememberLazyListState()
-
-    var bottomDialogTitle by rememberSaveable {
-        mutableStateOf("")
-    }
-
-    var searchValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-        mutableStateOf(TextFieldValue())
-    }
-
-    val isImeVisible by isImeVisibleState()
-
-    LaunchedEffect(validationError) {
-        if (validationError) {
-            coroutine.launch {
-                scrollState.animateScrollTo(0, tween(300))
-                haptic.performHapticFeedback(HapticFeedbackType.LongPress)
-            }
-        }
-    }
-
-    LaunchedEffect(bottomSheetScaffoldState.isVisible) {
-        if (!bottomSheetScaffoldState.isVisible) {
-            focusManager.clearFocus()
-            searchValue = TextFieldValue("")
-        }
-    }
-
-    Scaffold(
-        scaffoldState = scaffoldState,
-        modifier = Modifier
-            .fillMaxSize()
-            .navigationBarsPadding(),
-        backgroundColor = MaterialTheme.appColors.background
-    ) {
-
-        val topBarPadding by remember {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier
-                        .width(560.dp)
-                        .padding(bottom = 24.dp),
-                    compact = Modifier
-                        .fillMaxWidth()
-                        .padding(bottom = 6.dp)
-                )
-            )
-        }
-        val contentPaddings by remember {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier
-                        .widthIn(Dp.Unspecified, 420.dp)
-                        .padding(
-                            top = 32.dp,
-                            bottom = 40.dp
-                        ),
-                    compact = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 24.dp, vertical = 28.dp)
-                )
-            )
-        }
-        val buttonWidth by remember(key1 = windowSize) {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier.widthIn(232.dp, Dp.Unspecified),
-                    compact = Modifier.fillMaxWidth()
-                )
-            )
-        }
-
-        ModalBottomSheetLayout(
-            modifier = Modifier
-                .padding(bottom = if (isImeVisible && bottomSheetScaffoldState.isVisible) 120.dp else 0.dp)
-                .noRippleClickable {
-                    if (bottomSheetScaffoldState.isVisible) {
-                        coroutine.launch {
-                            bottomSheetScaffoldState.hide()
-                        }
-                    }
-                },
-            sheetState = bottomSheetScaffoldState,
-            sheetShape = MaterialTheme.appShapes.screenBackgroundShape,
-            scrimColor = Color.Black.copy(alpha = 0.4f),
-            sheetBackgroundColor = MaterialTheme.appColors.background,
-            sheetContent = {
-                SheetContent(
-                    title = bottomDialogTitle,
-                    searchValue = searchValue,
-                    expandedList = expandedList,
-                    listState = listState,
-                    onItemClick = { item ->
-                        mapFields[serverFieldName.value] = item.value
-                        selectableNamesMap[serverFieldName.value] = item.name
-                        coroutine.launch {
-                            bottomSheetScaffoldState.hide()
+                val uiState by viewModel.uiState.collectAsState()
+                val uiMessage by viewModel.uiMessage.collectAsState(initial = null)
+
+                if (uiState.appUpgradeEvent == null) {
+                    SignUpView(
+                        windowSize = windowSize,
+                        uiState = uiState,
+                        uiMessage = uiMessage,
+                        onBackClick = {
+                            requireActivity().supportFragmentManager.popBackStackImmediate()
+                        },
+                        onRegisterClick = { authType ->
+                            when (authType) {
+                                AuthType.PASSWORD -> viewModel.register()
+                                AuthType.GOOGLE,
+                                AuthType.FACEBOOK,
+                                AuthType.MICROSOFT -> viewModel.socialAuth(
+                                    this@SignUpFragment,
+                                    authType
+                                )
+                            }
+                        },
+                        onFieldUpdated = { key, value ->
+                            viewModel.updateField(key, value)
                         }
-                    },
-                    searchValueChanged = {
-                        searchValue = TextFieldValue(it)
-                    }
-                )
-            }
-        ) {
-            Image(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .fillMaxHeight(0.3f),
-                painter = painterResource(id = R.drawable.core_top_header),
-                contentScale = ContentScale.FillBounds,
-                contentDescription = null
-            )
-            HandleUIMessage(
-                uiMessage = uiMessage,
-                scaffoldState = scaffoldState
-            )
-            Column(
-                Modifier
-                    .fillMaxWidth()
-                    .padding(it)
-                    .statusBarsInset(),
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                Box(
-                    modifier = Modifier
-                        .then(topBarPadding),
-                    contentAlignment = Alignment.CenterStart
-                ) {
-                    Text(
-                        modifier = Modifier
-                            .fillMaxWidth(),
-                        text = stringResource(id = org.openedx.auth.R.string.auth_register),
-                        color = Color.White,
-                        textAlign = TextAlign.Center,
-                        style = MaterialTheme.appTypography.titleMedium
                     )
-                    BackBtn(
-                        modifier = Modifier.padding(end = 16.dp),
-                        tint = Color.White
-                    ) {
-                        onBackClick()
-                    }
-                }
-                Surface(
-                    color = MaterialTheme.appColors.background,
-                    shape = MaterialTheme.appShapes.screenBackgroundShape,
-                    modifier = Modifier.fillMaxWidth()
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .fillMaxHeight()
-                            .background(MaterialTheme.appColors.background),
-                        verticalArrangement = Arrangement.spacedBy(24.dp),
-                        horizontalAlignment = Alignment.CenterHorizontally
-                    ) {
-                        when (uiState) {
-                            is SignUpUIState.Loading -> {
-                                Box(
-                                    Modifier
-                                        .fillMaxSize(), contentAlignment = Alignment.Center
-                                ) {
-                                    CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-                                }
-                            }
-                            is SignUpUIState.Fields -> {
-                                mapFields.let {
-                                    if (it.isEmpty()) {
-                                        it.putAll(uiState.fields.associate { it.name to "" })
-                                        it["honor_code"] = true.toString()
-                                    }
-                                }
-                                Column(
-                                    Modifier
-                                        .fillMaxHeight()
-                                        .verticalScroll(scrollState)
-                                        .then(contentPaddings),
-                                    verticalArrangement = Arrangement.spacedBy(24.dp),
-                                    horizontalAlignment = Alignment.CenterHorizontally
-                                ) {
-                                    Column() {
-                                        Text(
-                                            modifier = Modifier.fillMaxWidth(),
-                                            text = stringResource(id = org.openedx.auth.R.string.auth_sign_up),
-                                            color = MaterialTheme.appColors.textPrimary,
-                                            style = MaterialTheme.appTypography.displaySmall
-                                        )
-                                        Text(
-                                            modifier = Modifier
-                                                .fillMaxWidth()
-                                                .padding(top = 4.dp),
-                                            text = stringResource(id = org.openedx.auth.R.string.auth_create_new_account),
-                                            color = MaterialTheme.appColors.textPrimary,
-                                            style = MaterialTheme.appTypography.titleSmall
-                                        )
-                                    }
-                                    RequiredFields(
-                                        fields = uiState.fields,
-                                        mapFields = mapFields,
-                                        showErrorMap = showErrorMap,
-                                        selectableNamesMap = selectableNamesMap,
-                                        onSelectClick = { serverName, field, list ->
-                                            keyboardController?.hide()
-                                            serverFieldName.value = serverName
-                                            expandedList = list
-                                            coroutine.launch {
-                                                if (bottomSheetScaffoldState.isVisible) {
-                                                    bottomSheetScaffoldState.hide()
-                                                } else {
-                                                    bottomDialogTitle = field.label
-                                                    showErrorMap[field.name] = false
-                                                    bottomSheetScaffoldState.show()
-                                                }
-                                            }
-                                        }
-                                    )
-                                    if (uiState.optionalFields.isNotEmpty()) {
-                                        ExpandableText(isExpanded = showOptionalFields, onClick = {
-                                            showOptionalFields = !showOptionalFields
-                                        })
-                                        Surface(color = MaterialTheme.appColors.background) {
-                                            AnimatedVisibility(visible = showOptionalFields) {
-                                                OptionalFields(
-                                                    fields = uiState.optionalFields,
-                                                    mapFields = mapFields,
-                                                    showErrorMap = showErrorMap,
-                                                    selectableNamesMap = selectableNamesMap,
-                                                    onSelectClick = { serverName, field, list ->
-                                                        keyboardController?.hide()
-                                                        serverFieldName.value =
-                                                            serverName
-                                                        expandedList = list
-                                                        coroutine.launch {
-                                                            if (bottomSheetScaffoldState.isVisible) {
-                                                                bottomSheetScaffoldState.hide()
-                                                            } else {
-                                                                bottomDialogTitle = field.label
-                                                                showErrorMap[field.name] = false
-                                                                bottomSheetScaffoldState.show()
-                                                            }
-                                                        }
-                                                    }
-                                                )
-                                            }
-                                        }
-                                    }
 
-                                    if (isButtonClicked) {
-                                        Box(
-                                            Modifier
-                                                .fillMaxWidth()
-                                                .height(42.dp),
-                                            contentAlignment = Alignment.Center
-                                        ) {
-                                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-                                        }
-                                    } else {
-                                        OpenEdXButton(
-                                            width = buttonWidth,
-                                            text = stringResource(id = org.openedx.auth.R.string.auth_create_account),
-                                            onClick = {
-                                                showErrorMap.clear()
-                                                onRegisterClick(mapFields.toMap())
-                                            }
-                                        )
-                                    }
-                                    Spacer(Modifier.height(70.dp))
-                                }
-                            }
+                    LaunchedEffect(uiState.successLogin) {
+                        if (uiState.successLogin) {
+                            router.clearBackStack(requireActivity().supportFragmentManager)
+                            router.navigateToMain(parentFragmentManager, viewModel.courseId)
                         }
                     }
+                } else {
+                    AppUpgradeRequiredScreen(
+                        onUpdateClick = {
+                            AppUpdateState.openPlayMarket(requireContext())
+                        }
+                    )
                 }
             }
         }
     }
-}
-
-
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_NO)
-@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun RegistrationScreenPreview() {
-    OpenEdXTheme {
-        RegistrationScreen(
-            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-            uiState = SignUpUIState.Fields(
-                fields = listOf(field, field, field),
-                optionalFields = listOf(
-                    field
-                )
-            ),
-            uiMessage = null,
-            isButtonClicked = false,
-            validationError = false,
-            onBackClick = {},
-            onRegisterClick = {}
-        )
-    }
-}
 
-@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_NO)
-@Preview(name = "NEXUS_9_Dark", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun RegistrationScreenTabletPreview() {
-    OpenEdXTheme {
-        RegistrationScreen(
-            windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
-            uiState = SignUpUIState.Fields(
-                fields = listOf(field, field, field),
-                optionalFields = listOf(
-                    field
-                )
-            ),
-            uiMessage = null,
-            isButtonClicked = false,
-            validationError = false,
-            onBackClick = {},
-            onRegisterClick = {}
-        )
+    companion object {
+        private const val ARG_COURSE_ID = "courseId"
+        fun newInstance(courseId: String?): SignUpFragment {
+            val fragment = SignUpFragment()
+            fragment.arguments = bundleOf(
+                ARG_COURSE_ID to courseId
+            )
+            return fragment
+        }
     }
 }
-
-private val option = RegistrationField.Option("def", "Bachelor", "Android")
-
-private val field = RegistrationField(
-    "Fullname",
-    "Fullname",
-    RegistrationFieldType.TEXT,
-    "Fullname",
-    instructions = "Enter your fullname",
-    exposed = false,
-    required = true,
-    restrictions = RegistrationField.Restrictions(),
-    options = listOf(option, option),
-    errorInstructions = ""
-)
\ No newline at end of file
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpUIState.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpUIState.kt
index a6af275f5..23e0458d9 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpUIState.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpUIState.kt
@@ -1,11 +1,19 @@
 package org.openedx.auth.presentation.signup
 
+import org.openedx.auth.domain.model.SocialAuthResponse
 import org.openedx.core.domain.model.RegistrationField
+import org.openedx.core.system.notifier.AppUpgradeEvent
 
-sealed class SignUpUIState {
-    data class Fields(
-        val fields: List<RegistrationField>,
-        val optionalFields: List<RegistrationField>
-    ) : SignUpUIState()
-    object Loading : SignUpUIState()
-}
\ No newline at end of file
+data class SignUpUIState(
+    val allFields: List<RegistrationField> = emptyList(),
+    val isFacebookAuthEnabled: Boolean = false,
+    val isGoogleAuthEnabled: Boolean = false,
+    val isMicrosoftAuthEnabled: Boolean = false,
+    val isSocialAuthEnabled: Boolean = false,
+    val isLoading: Boolean = false,
+    val isButtonLoading: Boolean = false,
+    val validationError: Boolean = false,
+    val successLogin: Boolean = false,
+    val socialAuth: SocialAuthResponse? = null,
+    val appUpgradeEvent: AppUpgradeEvent? = null,
+)
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpViewModel.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpViewModel.kt
index 4ec76f151..af1b8e094 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpViewModel.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/signup/SignUpViewModel.kt
@@ -1,117 +1,204 @@
 package org.openedx.auth.presentation.signup
 
-import androidx.lifecycle.LiveData
-import androidx.lifecycle.MutableLiveData
+import androidx.fragment.app.Fragment
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.channels.BufferOverflow
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import org.openedx.auth.data.model.AuthType
 import org.openedx.auth.domain.interactor.AuthInteractor
+import org.openedx.auth.domain.model.SocialAuthResponse
 import org.openedx.auth.presentation.AuthAnalytics
+import org.openedx.auth.presentation.sso.OAuthHelper
 import org.openedx.core.ApiConstants
 import org.openedx.core.BaseViewModel
 import org.openedx.core.R
-import org.openedx.core.SingleEventLiveData
 import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.RegistrationField
+import org.openedx.core.domain.model.RegistrationFieldType
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.ResourceManager
-import kotlinx.coroutines.launch
+import org.openedx.core.system.notifier.AppUpgradeNotifier
+import org.openedx.core.utils.Logger
 
 class SignUpViewModel(
     private val interactor: AuthInteractor,
     private val resourceManager: ResourceManager,
     private val analytics: AuthAnalytics,
-    private val preferencesManager: CorePreferences
+    private val preferencesManager: CorePreferences,
+    private val appUpgradeNotifier: AppUpgradeNotifier,
+    private val oAuthHelper: OAuthHelper,
+    private val config: Config,
+    val courseId: String?,
 ) : BaseViewModel() {
 
-    private val _uiState = MutableLiveData<SignUpUIState>(SignUpUIState.Loading)
-    val uiState: LiveData<SignUpUIState>
-        get() = _uiState
-
-    private val _uiMessage = SingleEventLiveData<UIMessage>()
-    val uiMessage: LiveData<UIMessage>
-        get() = _uiMessage
+    private val logger = Logger("SignUpViewModel")
 
-    private val _isButtonLoading = MutableLiveData(false)
-    val isButtonLoading: LiveData<Boolean>
-        get() = _isButtonLoading
-
-    private val _successLogin = MutableLiveData(false)
-    val successLogin: LiveData<Boolean>
-        get() = _successLogin
+    private val _uiState = MutableStateFlow(
+        SignUpUIState(
+            isFacebookAuthEnabled = config.getFacebookConfig().isEnabled(),
+            isGoogleAuthEnabled = config.getGoogleConfig().isEnabled(),
+            isMicrosoftAuthEnabled = config.getMicrosoftConfig().isEnabled(),
+            isSocialAuthEnabled = config.isSocialAuthEnabled(),
+            isLoading = true,
+        )
+    )
+    val uiState = _uiState.asStateFlow()
 
-    private val _validationError = MutableLiveData(false)
-    val validationError: LiveData<Boolean>
-        get() = _validationError
+    private val _uiMessage = MutableSharedFlow<UIMessage>(
+        replay = 0,
+        extraBufferCapacity = 1,
+        onBufferOverflow = BufferOverflow.DROP_OLDEST,
+    )
+    val uiMessage = _uiMessage.asSharedFlow()
 
-    private val optionalFields = mutableMapOf<String, String>()
-    private val allFields = mutableListOf<RegistrationField>()
+    init {
+        collectAppUpgradeEvent()
+    }
 
     fun getRegistrationFields() {
-        _uiState.value = SignUpUIState.Loading
+        _uiState.update { it.copy(isLoading = true) }
         viewModelScope.launch {
             try {
-                val fields = interactor.getRegistrationFields()
-                _uiState.value = SignUpUIState.Fields(
-                    fields = fields.filter { it.required },
-                    optionalFields = fields.filter { !it.required }
-                )
-                optionalFields.clear()
-                allFields.clear()
-                allFields.addAll(fields)
-                optionalFields.putAll((fields.filter { !it.required }.associate { it.name to "" }))
+                val allFields = interactor.getRegistrationFields()
+                _uiState.update { state ->
+                    state.copy(
+                        allFields = allFields,
+                        isLoading = false,
+                    )
+                }
             } catch (e: Exception) {
                 if (e.isInternetError()) {
-                    _uiMessage.value =
-                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_no_connection))
+                    _uiMessage.emit(
+                        UIMessage.SnackBarMessage(
+                            resourceManager.getString(R.string.core_error_no_connection)
+                        )
+                    )
                 } else {
-                    _uiMessage.value =
-                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
+                    _uiMessage.emit(
+                        UIMessage.SnackBarMessage(
+                            resourceManager.getString(R.string.core_error_unknown_error)
+                        )
+                    )
                 }
             }
         }
     }
 
-    fun register(mapFields: Map<String, String>) {
+    fun register() {
         analytics.createAccountClickedEvent("")
+        val mapFields = uiState.value.allFields.associate { it.name to it.placeholder } +
+                mapOf(ApiConstants.HONOR_CODE to true.toString())
         val resultMap = mapFields.toMutableMap()
-        optionalFields.forEach { (k, v) ->
+        uiState.value.allFields.filter { !it.required }.forEach { (k, _) ->
             if (mapFields[k].isNullOrEmpty()) {
                 resultMap.remove(k)
             }
         }
-        _isButtonLoading.value = true
-        _validationError.value = false
+        _uiState.update { it.copy(isButtonLoading = true, validationError = false) }
         viewModelScope.launch {
             try {
-                val validationFields = interactor.validateRegistrationFields(resultMap.toMap())
+                setErrorInstructions(emptyMap())
+                val validationFields = interactor.validateRegistrationFields(mapFields)
                 setErrorInstructions(validationFields.validationResult)
                 if (validationFields.hasValidationError()) {
-                    _validationError.value = true
+                    _uiState.update { it.copy(validationError = true, isButtonLoading = false) }
                 } else {
+                    val socialAuth = uiState.value.socialAuth
+                    if (socialAuth?.accessToken != null) {
+                        resultMap[ApiConstants.ACCESS_TOKEN] = socialAuth.accessToken
+                        resultMap[ApiConstants.PROVIDER] = socialAuth.authType.postfix
+                        resultMap[ApiConstants.CLIENT_ID] = config.getOAuthClientId()
+                    }
                     interactor.register(resultMap.toMap())
-                    interactor.login(
-                        resultMap.getValue(ApiConstants.EMAIL),
-                        resultMap.getValue(ApiConstants.PASSWORD)
-                    )
-                    setUserId()
-                    analytics.registrationSuccessEvent("")
-                    _successLogin.value = true
+                    analytics.registrationSuccessEvent(socialAuth?.authType?.postfix.orEmpty())
+                    if (socialAuth == null) {
+                        interactor.login(
+                            resultMap.getValue(ApiConstants.EMAIL),
+                            resultMap.getValue(ApiConstants.PASSWORD)
+                        )
+                        setUserId()
+                        _uiState.update { it.copy(successLogin = true, isButtonLoading = false) }
+                    } else {
+                        exchangeToken(socialAuth)
+                    }
                 }
-                _isButtonLoading.value = false
             } catch (e: Exception) {
-                _isButtonLoading.value = false
+                _uiState.update { it.copy(isButtonLoading = false) }
                 if (e.isInternetError()) {
-                    _uiMessage.value =
-                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_no_connection))
+                    _uiMessage.emit(
+                        UIMessage.SnackBarMessage(
+                            resourceManager.getString(R.string.core_error_no_connection)
+                        )
+                    )
                 } else {
-                    _uiMessage.value =
-                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
+                    _uiMessage.emit(
+                        UIMessage.SnackBarMessage(
+                            resourceManager.getString(R.string.core_error_unknown_error)
+                        )
+                    )
+                }
+            }
+        }
+    }
+
+    fun socialAuth(fragment: Fragment, authType: AuthType) {
+        _uiState.update { it.copy(isLoading = true) }
+        viewModelScope.launch {
+            withContext(Dispatchers.IO) {
+                runCatching {
+                    oAuthHelper.socialAuth(fragment, authType)
                 }
             }
+                .getOrNull()
+                .checkToken()
+        }
+    }
+
+    private suspend fun SocialAuthResponse?.checkToken() {
+        this?.accessToken?.let { token ->
+            if (token.isNotEmpty()) {
+                exchangeToken(this)
+            } else {
+                _uiState.update { it.copy(isLoading = false) }
+            }
+        } ?: _uiState.update { it.copy(isLoading = false) }
+    }
+
+    private suspend fun exchangeToken(socialAuth: SocialAuthResponse) {
+        runCatching {
+            interactor.loginSocial(socialAuth.accessToken, socialAuth.authType)
+        }.onFailure {
+            _uiState.update {
+                val fields = it.allFields.toMutableList()
+                    .filter { field -> field.type != RegistrationFieldType.PASSWORD }
+                updateField(ApiConstants.NAME, socialAuth.name)
+                updateField(ApiConstants.EMAIL, socialAuth.email)
+                setErrorInstructions(emptyMap())
+                it.copy(
+                    isLoading = false,
+                    socialAuth = socialAuth,
+                    allFields = fields
+                )
+            }
+        }.onSuccess {
+            setUserId()
+            analytics.userLoginEvent(socialAuth.authType.methodName)
+            _uiState.update { it.copy(successLogin = true) }
+            logger.d { "Social login (${socialAuth.authType.methodName}) success" }
         }
     }
 
     private fun setErrorInstructions(errorMap: Map<String, String>) {
+        val allFields = uiState.value.allFields
         val updatedFields = ArrayList<RegistrationField>(allFields.size)
         allFields.forEach {
             if (errorMap.containsKey(it.name)) {
@@ -120,14 +207,21 @@ class SignUpViewModel(
                 updatedFields.add(it.copy(errorInstructions = ""))
             }
         }
-        allFields.clear()
-        allFields.addAll(updatedFields)
-        _uiState.value = SignUpUIState.Fields(
-            updatedFields.filter { it.required },
-            updatedFields.filter { !it.required }
-        )
+        _uiState.update { state ->
+            state.copy(
+                allFields = updatedFields,
+                isLoading = false,
+            )
+        }
     }
 
+    private fun collectAppUpgradeEvent() {
+        viewModelScope.launch {
+            appUpgradeNotifier.notifier.collect { event ->
+                _uiState.update { it.copy(appUpgradeEvent = event) }
+            }
+        }
+    }
 
     private fun setUserId() {
         preferencesManager.user?.let {
@@ -135,10 +229,16 @@ class SignUpViewModel(
         }
     }
 
+    fun updateField(key: String, value: String) {
+        _uiState.update {
+            val updatedFields = uiState.value.allFields.toMutableList().map { field ->
+                if (field.name == key) {
+                    field.copy(placeholder = value)
+                } else {
+                    field
+                }
+            }
+            it.copy(allFields = updatedFields)
+        }
+    }
 }
-
-private enum class RegisterProvider(val keyName: String) {
-    GOOGLE("google-oauth2"),
-    AZURE("azuread-oauth2"),
-    FACEBOOK("facebook")
-}
\ No newline at end of file
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt
new file mode 100644
index 000000000..0658396e2
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SignUpView.kt
@@ -0,0 +1,498 @@
+package org.openedx.auth.presentation.signup.compose
+
+import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.ModalBottomSheetLayout
+import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.rememberModalBottomSheetState
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateMapOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalHapticFeedback
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import org.openedx.auth.R
+import org.openedx.auth.data.model.AuthType
+import org.openedx.auth.presentation.signup.SignUpUIState
+import org.openedx.auth.presentation.ui.ExpandableText
+import org.openedx.auth.presentation.ui.OptionalFields
+import org.openedx.auth.presentation.ui.RequiredFields
+import org.openedx.auth.presentation.ui.SocialAuthView
+import org.openedx.core.UIMessage
+import org.openedx.core.domain.model.RegistrationField
+import org.openedx.core.domain.model.RegistrationFieldType
+import org.openedx.core.ui.BackBtn
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.SheetContent
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.isImeVisibleState
+import org.openedx.core.ui.noRippleClickable
+import org.openedx.core.ui.rememberSaveableMap
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.core.R as coreR
+
+@OptIn(ExperimentalMaterialApi::class, ExperimentalComposeUiApi::class)
+@Composable
+internal fun SignUpView(
+    windowSize: WindowSize,
+    uiState: SignUpUIState,
+    uiMessage: UIMessage?,
+    onBackClick: () -> Unit,
+    onFieldUpdated: (String, String) -> Unit,
+    onRegisterClick: (authType: AuthType) -> Unit,
+) {
+    val scaffoldState = rememberScaffoldState()
+    val focusManager = LocalFocusManager.current
+    val bottomSheetScaffoldState = rememberModalBottomSheetState(
+        initialValue = ModalBottomSheetValue.Hidden,
+        skipHalfExpanded = true
+    )
+    val coroutine = rememberCoroutineScope()
+    val keyboardController = LocalSoftwareKeyboardController.current
+    var expandedList by rememberSaveable {
+        mutableStateOf(emptyList<RegistrationField.Option>())
+    }
+    val selectableNamesMap = rememberSaveableMap {
+        mutableStateMapOf<String, String?>()
+    }
+    val serverFieldName = rememberSaveable {
+        mutableStateOf("")
+    }
+    var showOptionalFields by rememberSaveable {
+        mutableStateOf(false)
+    }
+    val showErrorMap = rememberSaveableMap {
+        mutableStateMapOf<String, Boolean?>()
+    }
+    val scrollState = rememberScrollState()
+
+    val haptic = LocalHapticFeedback.current
+
+    val listState = rememberLazyListState()
+
+    var bottomDialogTitle by rememberSaveable {
+        mutableStateOf("")
+    }
+
+    var searchValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(TextFieldValue())
+    }
+
+    val isImeVisible by isImeVisibleState()
+
+    val fields = uiState.allFields.filter { it.required }
+    val optionalFields = uiState.allFields.filter { !it.required }
+
+    LaunchedEffect(uiState.validationError) {
+        if (uiState.validationError) {
+            coroutine.launch {
+                scrollState.animateScrollTo(0, tween(300))
+                haptic.performHapticFeedback(HapticFeedbackType.LongPress)
+            }
+        }
+    }
+
+    LaunchedEffect(uiState.socialAuth) {
+        if (uiState.socialAuth != null) {
+            coroutine.launch {
+                showErrorMap.clear()
+                scrollState.animateScrollTo(0, tween(300))
+            }
+        }
+    }
+
+    LaunchedEffect(bottomSheetScaffoldState.isVisible) {
+        if (!bottomSheetScaffoldState.isVisible) {
+            focusManager.clearFocus()
+            searchValue = TextFieldValue("")
+        }
+    }
+
+    Scaffold(
+        scaffoldState = scaffoldState,
+        modifier = Modifier
+            .semantics {
+                testTagsAsResourceId = true
+            }
+            .fillMaxSize()
+            .navigationBarsPadding(),
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+
+        val topBarPadding by remember {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier
+                        .width(560.dp)
+                        .padding(bottom = 24.dp),
+                    compact = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 6.dp)
+                )
+            )
+        }
+        val contentPaddings by remember {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier
+                        .widthIn(Dp.Unspecified, 420.dp)
+                        .padding(
+                            top = 32.dp,
+                            bottom = 40.dp
+                        ),
+                    compact = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 24.dp, vertical = 28.dp)
+                )
+            )
+        }
+        val buttonWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier.widthIn(232.dp, Dp.Unspecified),
+                    compact = Modifier.fillMaxWidth()
+                )
+            )
+        }
+
+        ModalBottomSheetLayout(
+            modifier = Modifier
+                .padding(bottom = if (isImeVisible && bottomSheetScaffoldState.isVisible) 120.dp else 0.dp)
+                .noRippleClickable {
+                    if (bottomSheetScaffoldState.isVisible) {
+                        coroutine.launch {
+                            bottomSheetScaffoldState.hide()
+                        }
+                    }
+                },
+            sheetState = bottomSheetScaffoldState,
+            sheetShape = MaterialTheme.appShapes.screenBackgroundShape,
+            scrimColor = Color.Black.copy(alpha = 0.4f),
+            sheetBackgroundColor = MaterialTheme.appColors.background,
+            sheetContent = {
+                SheetContent(
+                    title = bottomDialogTitle,
+                    searchValue = searchValue,
+                    expandedList = expandedList,
+                    listState = listState,
+                    onItemClick = { item ->
+                        onFieldUpdated(serverFieldName.value, item.value)
+                        selectableNamesMap[serverFieldName.value] = item.name
+                        coroutine.launch {
+                            bottomSheetScaffoldState.hide()
+                        }
+                    },
+                    searchValueChanged = {
+                        searchValue = TextFieldValue(it)
+                    }
+                )
+            }
+        ) {
+            Image(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .fillMaxHeight(0.3f),
+                painter = painterResource(id = coreR.drawable.core_top_header),
+                contentScale = ContentScale.FillBounds,
+                contentDescription = null
+            )
+            HandleUIMessage(
+                uiMessage = uiMessage,
+                scaffoldState = scaffoldState
+            )
+            Column(
+                Modifier
+                    .fillMaxWidth()
+                    .padding(it)
+                    .statusBarsInset(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Box(
+                    modifier = Modifier
+                        .then(topBarPadding),
+                    contentAlignment = Alignment.CenterStart
+                ) {
+                    Text(
+                        modifier = Modifier
+                            .testTag("txt_screen_title")
+                            .fillMaxWidth(),
+                        text = stringResource(id = coreR.string.core_register),
+                        color = Color.White,
+                        textAlign = TextAlign.Center,
+                        style = MaterialTheme.appTypography.titleMedium
+                    )
+                    BackBtn(
+                        modifier = Modifier.padding(end = 16.dp),
+                        tint = Color.White
+                    ) {
+                        onBackClick()
+                    }
+                }
+                Surface(
+                    color = MaterialTheme.appColors.background,
+                    shape = MaterialTheme.appShapes.screenBackgroundShape,
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxHeight()
+                            .background(MaterialTheme.appColors.background),
+                        verticalArrangement = Arrangement.spacedBy(24.dp),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        if (uiState.isLoading) {
+                            Box(
+                                Modifier
+                                    .fillMaxSize(), contentAlignment = Alignment.Center
+                            ) {
+                                CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                            }
+                        } else {
+                            Column(
+                                Modifier
+                                    .fillMaxHeight()
+                                    .verticalScroll(scrollState)
+                                    .displayCutoutForLandscape()
+                                    .then(contentPaddings),
+                                verticalArrangement = Arrangement.spacedBy(24.dp),
+                                horizontalAlignment = Alignment.CenterHorizontally
+                            ) {
+                                Column {
+                                    if (uiState.socialAuth != null) {
+                                        SocialSignedView(uiState.socialAuth.authType)
+                                        Text(
+                                            modifier = Modifier
+                                                .fillMaxWidth()
+                                                .padding(top = 4.dp),
+                                            text = stringResource(
+                                                id = R.string.auth_compete_registration
+                                            ),
+                                            color = MaterialTheme.appColors.textPrimary,
+                                            style = MaterialTheme.appTypography.titleSmall
+                                        )
+                                    } else {
+                                        Text(
+                                            modifier = Modifier
+                                                .testTag("txt_sign_up_title")
+                                                .fillMaxWidth(),
+                                            text = stringResource(id = R.string.auth_sign_up),
+                                            color = MaterialTheme.appColors.textPrimary,
+                                            style = MaterialTheme.appTypography.displaySmall
+                                        )
+                                        Text(
+                                            modifier = Modifier
+                                                .testTag("txt_sign_up_description")
+                                                .fillMaxWidth()
+                                                .padding(top = 4.dp),
+                                            text = stringResource(
+                                                id = R.string.auth_create_new_account
+                                            ),
+                                            color = MaterialTheme.appColors.textPrimary,
+                                            style = MaterialTheme.appTypography.titleSmall
+                                        )
+                                    }
+                                }
+                                RequiredFields(
+                                    fields = fields,
+                                    showErrorMap = showErrorMap,
+                                    selectableNamesMap = selectableNamesMap,
+                                    onSelectClick = { serverName, field, list ->
+                                        keyboardController?.hide()
+                                        serverFieldName.value = serverName
+                                        expandedList = list
+                                        coroutine.launch {
+                                            if (bottomSheetScaffoldState.isVisible) {
+                                                bottomSheetScaffoldState.hide()
+                                            } else {
+                                                bottomDialogTitle = field.label
+                                                showErrorMap[field.name] = false
+                                                bottomSheetScaffoldState.show()
+                                            }
+                                        }
+                                    },
+                                    onFieldUpdated = onFieldUpdated
+                                )
+                                if (optionalFields.isNotEmpty()) {
+                                    ExpandableText(
+                                        modifier = Modifier.testTag("txt_optional_field"),
+                                        isExpanded = showOptionalFields,
+                                        onClick = {
+                                            showOptionalFields = !showOptionalFields
+                                        }
+                                    )
+                                    Surface(color = MaterialTheme.appColors.background) {
+                                        AnimatedVisibility(visible = showOptionalFields) {
+                                            OptionalFields(
+                                                fields = optionalFields,
+                                                showErrorMap = showErrorMap,
+                                                selectableNamesMap = selectableNamesMap,
+                                                onSelectClick = { serverName, field, list ->
+                                                    keyboardController?.hide()
+                                                    serverFieldName.value =
+                                                        serverName
+                                                    expandedList = list
+                                                    coroutine.launch {
+                                                        if (bottomSheetScaffoldState.isVisible) {
+                                                            bottomSheetScaffoldState.hide()
+                                                        } else {
+                                                            bottomDialogTitle = field.label
+                                                            showErrorMap[field.name] = false
+                                                            bottomSheetScaffoldState.show()
+                                                        }
+                                                    }
+                                                },
+                                                onFieldUpdated = onFieldUpdated,
+                                            )
+                                        }
+                                    }
+                                }
+
+                                if (uiState.isButtonLoading) {
+                                    Box(
+                                        Modifier
+                                            .fillMaxWidth()
+                                            .height(42.dp),
+                                        contentAlignment = Alignment.Center
+                                    ) {
+                                        CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                                    }
+                                } else {
+                                    OpenEdXButton(
+                                        width = buttonWidth.testTag("btn_create_account"),
+                                        text = stringResource(id = R.string.auth_create_account),
+                                        onClick = {
+                                            showErrorMap.clear()
+                                            onRegisterClick(AuthType.PASSWORD)
+                                        }
+                                    )
+                                }
+                                if (uiState.isSocialAuthEnabled && uiState.socialAuth == null) {
+                                    SocialAuthView(
+                                        modifier = buttonWidth,
+                                        isGoogleAuthEnabled = uiState.isGoogleAuthEnabled,
+                                        isFacebookAuthEnabled = uiState.isFacebookAuthEnabled,
+                                        isMicrosoftAuthEnabled = uiState.isMicrosoftAuthEnabled,
+                                        isSignIn = false,
+                                    ) {
+                                        onRegisterClick(it)
+                                    }
+                                }
+                                Spacer(Modifier.height(70.dp))
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun RegistrationScreenPreview() {
+    OpenEdXTheme {
+        SignUpView(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            uiState = SignUpUIState(
+                allFields = listOf(field, field, field.copy(required = false)),
+            ),
+            uiMessage = null,
+            onBackClick = {},
+            onRegisterClick = {},
+            onFieldUpdated = { _, _ -> },
+        )
+    }
+}
+
+@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_9_Dark", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun RegistrationScreenTabletPreview() {
+    OpenEdXTheme {
+        SignUpView(
+            windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
+            uiState = SignUpUIState(
+                allFields = listOf(field, field, field.copy(required = false)),
+            ),
+            uiMessage = null,
+            onBackClick = {},
+            onRegisterClick = {},
+            onFieldUpdated = { _, _ -> },
+        )
+    }
+}
+
+private val option = RegistrationField.Option("def", "Bachelor", "Android")
+
+private val field = RegistrationField(
+    "Fullname",
+    "Fullname",
+    RegistrationFieldType.TEXT,
+    "Fullname",
+    instructions = "Enter your fullname",
+    exposed = false,
+    required = true,
+    restrictions = RegistrationField.Restrictions(),
+    options = listOf(option, option),
+    errorInstructions = ""
+)
diff --git a/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SocialSignedView.kt b/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SocialSignedView.kt
new file mode 100644
index 000000000..25a9434d1
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/signup/compose/SocialSignedView.kt
@@ -0,0 +1,61 @@
+package org.openedx.auth.presentation.signup.compose
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.openedx.auth.R
+import org.openedx.auth.data.model.AuthType
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.R as coreR
+
+@Composable
+internal fun SocialSignedView(authType: AuthType) {
+    Column(
+        modifier = Modifier
+            .background(
+                color = MaterialTheme.appColors.secondary,
+                shape = MaterialTheme.appShapes.buttonShape
+            )
+            .padding(20.dp)
+    ) {
+        Text(
+            fontSize = 18.sp,
+            fontWeight = FontWeight.Bold,
+            text = stringResource(
+                id = R.string.auth_social_signed_title,
+                authType.methodName
+            )
+        )
+        Text(
+            modifier = Modifier.padding(top = 8.dp),
+            text = stringResource(
+                id = R.string.auth_social_signed_desc,
+                stringResource(id = coreR.string.app_name)
+            )
+        )
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun PreviewSocialSignedView() {
+    OpenEdXTheme {
+        SocialSignedView(AuthType.GOOGLE)
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/sso/FacebookAuthHelper.kt b/auth/src/main/java/org/openedx/auth/presentation/sso/FacebookAuthHelper.kt
new file mode 100644
index 000000000..70f2209ab
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/sso/FacebookAuthHelper.kt
@@ -0,0 +1,84 @@
+package org.openedx.auth.presentation.sso
+
+import android.os.Bundle
+import androidx.fragment.app.Fragment
+import com.facebook.CallbackManager
+import com.facebook.FacebookCallback
+import com.facebook.FacebookException
+import com.facebook.GraphRequest
+import com.facebook.login.LoginManager
+import com.facebook.login.LoginResult
+import kotlinx.coroutines.suspendCancellableCoroutine
+import org.openedx.auth.data.model.AuthType
+import org.openedx.auth.domain.model.SocialAuthResponse
+import org.openedx.core.ApiConstants
+import org.openedx.core.extension.safeResume
+import org.openedx.core.utils.Logger
+import kotlin.coroutines.resume
+import kotlin.coroutines.resumeWithException
+
+class FacebookAuthHelper {
+
+    private val logger = Logger(TAG)
+    private val callbackManager = CallbackManager.Factory.create()
+
+    suspend fun socialAuth(fragment: Fragment): SocialAuthResponse? =
+        suspendCancellableCoroutine { continuation ->
+            LoginManager.getInstance().registerCallback(
+                callbackManager,
+                object : FacebookCallback<LoginResult> {
+                    override fun onCancel() {
+                        logger.d { "Facebook auth canceled" }
+                        continuation.resume(SocialAuthResponse())
+                    }
+
+                    override fun onError(error: FacebookException) {
+                        logger.e { "Facebook auth error: $error" }
+                        continuation.resumeWithException(error)
+                    }
+
+                    override fun onSuccess(result: LoginResult) {
+                        logger.d { "Facebook auth success" }
+                        GraphRequest.newMeRequest(result.accessToken) { obj, response ->
+                            if (response?.error != null) {
+                                continuation.cancel()
+                            } else {
+                                continuation.safeResume(
+                                    SocialAuthResponse(
+                                        accessToken = result.accessToken.token,
+                                        name = obj?.getString(ApiConstants.NAME) ?: "",
+                                        email = obj?.getString(ApiConstants.EMAIL) ?: "",
+                                        authType = AuthType.FACEBOOK,
+                                    )
+                                ) {
+                                    continuation.cancel()
+                                }
+                            }
+                        }.also {
+                            it.parameters = Bundle().apply {
+                                putString("fields", "${ApiConstants.NAME}, ${ApiConstants.EMAIL}")
+                            }
+                            it.executeAsync()
+                        }
+                    }
+                }
+            )
+            LoginManager.getInstance().logOut()
+            LoginManager.getInstance().logInWithReadPermissions(
+                fragment,
+                callbackManager,
+                PERMISSIONS_LIST
+            )
+        }
+
+    fun clear() {
+        runCatching {
+            LoginManager.getInstance().unregisterCallback(callbackManager)
+        }
+    }
+
+    private companion object {
+        const val TAG = "FacebookAuthHelper"
+        val PERMISSIONS_LIST = listOf("email", "public_profile")
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/sso/GoogleAuthHelper.kt b/auth/src/main/java/org/openedx/auth/presentation/sso/GoogleAuthHelper.kt
new file mode 100644
index 000000000..99985b882
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/sso/GoogleAuthHelper.kt
@@ -0,0 +1,110 @@
+package org.openedx.auth.presentation.sso
+
+import android.accounts.Account
+import android.app.Activity
+import android.credentials.GetCredentialException
+import android.os.Bundle
+import androidx.annotation.WorkerThread
+import androidx.credentials.Credential
+import androidx.credentials.CredentialManager
+import androidx.credentials.CustomCredential
+import androidx.credentials.GetCredentialRequest
+import androidx.credentials.exceptions.GetCredentialCancellationException
+import com.google.android.gms.auth.GoogleAuthUtil
+import com.google.android.libraries.identity.googleid.GetSignInWithGoogleOption
+import com.google.android.libraries.identity.googleid.GoogleIdTokenCredential
+import com.google.android.libraries.identity.googleid.GoogleIdTokenParsingException
+import org.openedx.auth.data.model.AuthType
+import org.openedx.auth.domain.model.SocialAuthResponse
+import org.openedx.core.config.Config
+import org.openedx.core.utils.Logger
+
+class GoogleAuthHelper(private val config: Config) {
+
+    private val logger = Logger(TAG)
+
+    private fun getAuthToken(activityContext: Activity, name: String): String? {
+        return runCatching {
+            GoogleAuthUtil.getToken(
+                activityContext,
+                Account(name, GoogleAuthUtil.GOOGLE_ACCOUNT_TYPE),
+                SCOPE
+            )
+        }.getOrNull()
+    }
+
+    private suspend fun getCredentials(activityContext: Activity): GoogleIdTokenCredential? {
+        return runCatching {
+            val credentialManager = CredentialManager.create(activityContext)
+            val googleIdOption =
+                GetSignInWithGoogleOption.Builder(config.getGoogleConfig().clientId).build()
+            val request: GetCredentialRequest = GetCredentialRequest.Builder()
+                .addCredentialOption(googleIdOption)
+                .build()
+            val result = credentialManager.getCredential(
+                request = request,
+                context = activityContext,
+            )
+            getGoogleIdToken(result.credential)
+        }.onFailure {
+            if (it is GetCredentialCancellationException &&
+                it.type == GetCredentialException.TYPE_USER_CANCELED
+            ) {
+                return null
+            }
+            logger.e { "GetCredentials error: ${it.message}" }
+        }.getOrNull()
+    }
+
+    private fun getGoogleIdToken(credential: Credential): GoogleIdTokenCredential? {
+        return when (credential) {
+            is GoogleIdTokenCredential -> {
+                parseToken(credential.data)
+            }
+
+            is CustomCredential -> {
+                if (credential.type == GoogleIdTokenCredential.TYPE_GOOGLE_ID_TOKEN_CREDENTIAL) {
+                    parseToken(credential.data)
+                } else {
+                    null
+                }
+            }
+
+            else -> {
+                logger.e { "Unknown credential type" }
+                null
+            }
+        }
+    }
+
+    private fun parseToken(data: Bundle): GoogleIdTokenCredential? =
+        try {
+            GoogleIdTokenCredential.createFrom(data)
+        } catch (e: GoogleIdTokenParsingException) {
+            logger.e { "Token parsing exception: $e" }
+            null
+        }
+
+    @WorkerThread
+    suspend fun socialAuth(activityContext: Activity): SocialAuthResponse? {
+        return getCredentials(activityContext)?.let { credentials ->
+            if (credentials.id.isNotBlank()) {
+                val token = getAuthToken(activityContext, credentials.id).orEmpty()
+                logger.d { token }
+                SocialAuthResponse(
+                    accessToken = token,
+                    name = credentials.displayName.orEmpty(),
+                    email = credentials.id,
+                    authType = AuthType.GOOGLE,
+                )
+            } else {
+                return null
+            }
+        }
+    }
+
+    private companion object {
+        const val TAG = "GoogleAuthHelper"
+        const val SCOPE = "oauth2: https://www.googleapis.com/auth/userinfo.email"
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/sso/MicrosoftAuthHelper.kt b/auth/src/main/java/org/openedx/auth/presentation/sso/MicrosoftAuthHelper.kt
new file mode 100644
index 000000000..7cfcef591
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/sso/MicrosoftAuthHelper.kt
@@ -0,0 +1,75 @@
+package org.openedx.auth.presentation.sso
+
+import android.app.Activity
+import androidx.annotation.WorkerThread
+import com.microsoft.identity.client.AcquireTokenParameters
+import com.microsoft.identity.client.AuthenticationCallback
+import com.microsoft.identity.client.IAuthenticationResult
+import com.microsoft.identity.client.PublicClientApplication
+import com.microsoft.identity.client.exception.MsalException
+import kotlinx.coroutines.suspendCancellableCoroutine
+import org.openedx.auth.data.model.AuthType
+import org.openedx.auth.domain.model.SocialAuthResponse
+import org.openedx.core.ApiConstants
+import org.openedx.core.R
+import org.openedx.core.extension.safeResume
+import org.openedx.core.utils.Logger
+import kotlin.coroutines.resume
+import kotlin.coroutines.resumeWithException
+
+class MicrosoftAuthHelper {
+    private val logger = Logger(TAG)
+
+    @WorkerThread
+    suspend fun socialAuth(activityContext: Activity): SocialAuthResponse? =
+        suspendCancellableCoroutine { continuation ->
+            val clientApplication =
+                PublicClientApplication.createMultipleAccountPublicClientApplication(
+                    activityContext,
+                    R.raw.microsoft_auth_config
+                )
+            val params = AcquireTokenParameters.Builder()
+                .startAuthorizationFromActivity(activityContext)
+                .withScopes(SCOPES)
+                .withCallback(object : AuthenticationCallback {
+                    override fun onSuccess(authenticationResult: IAuthenticationResult?) {
+                        val claims = authenticationResult?.account?.claims
+                        val name =
+                            (claims?.getOrDefault(ApiConstants.NAME, "") as? String)
+                                .orEmpty()
+                        val email =
+                            (claims?.getOrDefault(ApiConstants.EMAIL, "") as? String)
+                                .orEmpty()
+                        continuation.safeResume(
+                            SocialAuthResponse(
+                                accessToken = authenticationResult?.accessToken.orEmpty(),
+                                name = name,
+                                email = email,
+                                authType = AuthType.MICROSOFT,
+                            )
+                        ) {
+                            continuation.cancel()
+                        }
+                    }
+
+                    override fun onError(exception: MsalException) {
+                        logger.e { "Microsoft auth error: $exception" }
+                        continuation.resumeWithException(exception)
+                    }
+
+                    override fun onCancel() {
+                        logger.d { "Microsoft auth canceled" }
+                        continuation.resume(SocialAuthResponse())
+                    }
+                }).build()
+            clientApplication.accounts.forEach {
+                clientApplication.removeAccount(it)
+            }
+            clientApplication.acquireToken(params)
+        }
+
+    private companion object {
+        const val TAG = "MicrosoftAuthHelper"
+        val SCOPES = listOf("User.Read", ApiConstants.EMAIL)
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/sso/OAuthHelper.kt b/auth/src/main/java/org/openedx/auth/presentation/sso/OAuthHelper.kt
new file mode 100644
index 000000000..776df7c46
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/sso/OAuthHelper.kt
@@ -0,0 +1,30 @@
+package org.openedx.auth.presentation.sso
+
+import androidx.fragment.app.Fragment
+import org.openedx.auth.data.model.AuthType
+import org.openedx.auth.domain.model.SocialAuthResponse
+
+class OAuthHelper(
+    private val facebookAuthHelper: FacebookAuthHelper,
+    private val googleAuthHelper: GoogleAuthHelper,
+    private val microsoftAuthHelper: MicrosoftAuthHelper,
+) {
+    /**
+     * SDK integration guides:
+     * https://developer.android.com/training/sign-in/credential-manager
+     * https://developers.facebook.com/docs/facebook-login/android/
+     * https://github.com/AzureAD/microsoft-authentication-library-for-android
+     */
+    internal suspend fun socialAuth(fragment: Fragment, authType: AuthType): SocialAuthResponse? {
+        return when (authType) {
+            AuthType.PASSWORD -> null
+            AuthType.GOOGLE -> googleAuthHelper.socialAuth(fragment.requireActivity())
+            AuthType.FACEBOOK -> facebookAuthHelper.socialAuth(fragment)
+            AuthType.MICROSOFT -> microsoftAuthHelper.socialAuth(fragment.requireActivity())
+        }
+    }
+
+    fun clear() {
+        facebookAuthHelper.clear()
+    }
+}
diff --git a/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt b/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt
index e00b56e6c..e875a4539 100644
--- a/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt
+++ b/auth/src/main/java/org/openedx/auth/presentation/ui/AuthUI.kt
@@ -37,6 +37,7 @@ import androidx.compose.ui.focus.FocusManager
 import androidx.compose.ui.focus.focusTarget
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
@@ -60,9 +61,9 @@ import org.openedx.core.ui.theme.appTypography
 @Composable
 fun RequiredFields(
     fields: List<RegistrationField>,
-    mapFields: MutableMap<String, String?>,
     showErrorMap: MutableMap<String, Boolean?>,
     selectableNamesMap: MutableMap<String, String?>,
+    onFieldUpdated: (String, String) -> Unit,
     onSelectClick: (String, RegistrationField, List<RegistrationField.Option>) -> Unit
 ) {
     fields.forEach { field ->
@@ -76,7 +77,7 @@ fun RequiredFields(
                         if (!isErrorShown) {
                             showErrorMap[serverName] = isErrorShown
                         }
-                        mapFields[serverName] = value
+                        onFieldUpdated(serverName, value)
                     }
                 )
             }
@@ -85,6 +86,7 @@ fun RequiredFields(
                 val linkedText =
                     TextConverter.htmlTextToLinkedText(field.label)
                 HyperlinkText(
+                    modifier = Modifier.testTag("txt_${field.name}"),
                     fullText = linkedText.text,
                     hyperLinks = linkedText.links,
                     linkTextColor = MaterialTheme.appColors.primary
@@ -117,7 +119,7 @@ fun RequiredFields(
                         if (!isErrorShown) {
                             showErrorMap[serverName] = isErrorShown
                         }
-                        mapFields[serverName] = value
+                        onFieldUpdated(serverName, value)
                     }
                 )
             }
@@ -132,12 +134,12 @@ fun RequiredFields(
 @Composable
 fun OptionalFields(
     fields: List<RegistrationField>,
-    mapFields: MutableMap<String, String?>,
     showErrorMap: MutableMap<String, Boolean?>,
     selectableNamesMap: MutableMap<String, String?>,
-    onSelectClick: (String, RegistrationField, List<RegistrationField.Option>) -> Unit
+    onSelectClick: (String, RegistrationField, List<RegistrationField.Option>) -> Unit,
+    onFieldUpdated: (String, String) -> Unit,
 ) {
-    Column() {
+    Column {
         fields.forEach { field ->
             when (field.type) {
                 RegistrationFieldType.TEXT, RegistrationFieldType.EMAIL, RegistrationFieldType.CONFIRM_EMAIL, RegistrationFieldType.PASSWORD -> {
@@ -151,8 +153,7 @@ fun OptionalFields(
                                 showErrorMap[serverName] =
                                     isErrorShown
                             }
-                            mapFields[serverName] =
-                                value
+                            onFieldUpdated(serverName, value)
                         }
                     )
                 }
@@ -195,11 +196,9 @@ fun OptionalFields(
                         registrationField = field,
                         onValueChanged = { serverName, value, isErrorShown ->
                             if (!isErrorShown) {
-                                showErrorMap[serverName] =
-                                    isErrorShown
+                                showErrorMap[serverName] = isErrorShown
                             }
-                            mapFields[serverName] =
-                                value
+                            onFieldUpdated(serverName, value)
                         }
                     )
                 }
@@ -214,6 +213,8 @@ fun OptionalFields(
 @Composable
 fun LoginTextField(
     modifier: Modifier = Modifier,
+    title: String,
+    description: String,
     onValueChanged: (String) -> Unit,
     imeAction: ImeAction = ImeAction.Next,
     keyboardActions: (FocusManager) -> Unit = { it.moveFocus(FocusDirection.Down) }
@@ -225,8 +226,10 @@ fun LoginTextField(
     }
     val focusManager = LocalFocusManager.current
     Text(
-        modifier = Modifier.fillMaxWidth(),
-        text = stringResource(id = R.string.auth_email),
+        modifier = Modifier
+            .testTag("txt_email_label")
+            .fillMaxWidth(),
+        text = title,
         color = MaterialTheme.appColors.textPrimary,
         style = MaterialTheme.appTypography.labelLarge
     )
@@ -244,7 +247,8 @@ fun LoginTextField(
         shape = MaterialTheme.appShapes.textFieldShape,
         placeholder = {
             Text(
-                text = stringResource(id = R.string.auth_example_email),
+                modifier = Modifier.testTag("txt_email_placeholder"),
+                text = description,
                 color = MaterialTheme.appColors.textFieldHint,
                 style = MaterialTheme.appTypography.bodyMedium
             )
@@ -258,7 +262,7 @@ fun LoginTextField(
         },
         textStyle = MaterialTheme.appTypography.bodyMedium,
         singleLine = true,
-        modifier = modifier
+        modifier = modifier.testTag("tf_email")
     )
 }
 
@@ -270,7 +274,7 @@ fun InputRegistrationField(
     onValueChanged: (String, String, Boolean) -> Unit
 ) {
     var inputRegistrationFieldValue by rememberSaveable {
-        mutableStateOf("")
+        mutableStateOf(registrationField.placeholder)
     }
     val focusManager = LocalFocusManager.current
     val visualTransformation = if (registrationField.type == RegistrationFieldType.PASSWORD) {
@@ -300,7 +304,9 @@ fun InputRegistrationField(
     }
     Column {
         Text(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .testTag("txt_${registrationField.name}_label")
+                .fillMaxWidth(),
             text = registrationField.label,
             style = MaterialTheme.appTypography.labelLarge,
             color = MaterialTheme.appColors.textPrimary
@@ -323,6 +329,7 @@ fun InputRegistrationField(
             shape = MaterialTheme.appShapes.textFieldShape,
             placeholder = {
                 Text(
+                    modifier = modifier.testTag("txt_${registrationField.name}_placeholder"),
                     text = registrationField.label,
                     color = MaterialTheme.appColors.textFieldHint,
                     style = MaterialTheme.appTypography.bodyMedium
@@ -338,10 +345,11 @@ fun InputRegistrationField(
             },
             textStyle = MaterialTheme.appTypography.bodyMedium,
             singleLine = isSingleLine,
-            modifier = modifier
+            modifier = modifier.testTag("tf_${registrationField.name}")
         )
         Spacer(modifier = Modifier.height(6.dp))
         Text(
+            modifier = Modifier.testTag("txt_${registrationField.name}_description"),
             text = helperText,
             style = MaterialTheme.appTypography.bodySmall,
             color = helperTextColor
@@ -383,7 +391,9 @@ fun SelectableRegisterField(
             }
     ) {
         Text(
-            modifier = Modifier.fillMaxWidth(),
+            modifier = Modifier
+                .testTag("txt_${registrationField.name}_label")
+                .fillMaxWidth(),
             text = registrationField.label,
             style = MaterialTheme.appTypography.labelLarge,
             color = MaterialTheme.appColors.textPrimary
@@ -404,12 +414,14 @@ fun SelectableRegisterField(
             textStyle = MaterialTheme.appTypography.bodyMedium,
             onValueChange = { },
             modifier = Modifier
+                .testTag("tf_${registrationField.name}")
                 .fillMaxWidth()
                 .noRippleClickable {
                     onClick(registrationField.name, registrationField.options)
                 },
             placeholder = {
                 Text(
+                    modifier = Modifier.testTag("txt_${registrationField.name}_placeholder"),
                     text = registrationField.label,
                     color = MaterialTheme.appColors.textFieldHint,
                     style = MaterialTheme.appTypography.bodyMedium
@@ -425,6 +437,7 @@ fun SelectableRegisterField(
         )
         Spacer(modifier = Modifier.height(6.dp))
         Text(
+            modifier = Modifier.testTag("txt_${registrationField.name}_description"),
             text = helperText,
             style = MaterialTheme.appTypography.bodySmall,
             color = helperTextColor
@@ -434,6 +447,7 @@ fun SelectableRegisterField(
 
 @Composable
 fun ExpandableText(
+    modifier: Modifier = Modifier,
     isExpanded: Boolean,
     onClick: (Boolean) -> Unit
 ) {
@@ -457,7 +471,7 @@ fun ExpandableText(
     val icon = Icons.Filled.ChevronRight
 
     Row(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .noRippleClickable {
                 onClick(isExpanded)
@@ -522,15 +536,13 @@ fun InputRegistrationFieldPreview() {
 private fun OptionalFieldsPreview() {
     OpenEdXTheme {
         Column(Modifier.background(MaterialTheme.appColors.background)) {
+            val optionalField = field.copy(required = false)
             OptionalFields(
-                fields = listOf(field, field, field),
-                mapFields = SnapshotStateMap(),
+                fields = List(3) { optionalField },
                 showErrorMap = SnapshotStateMap(),
                 selectableNamesMap = SnapshotStateMap(),
-                onSelectClick = { _, _, _ ->
-
-                }
-
+                onSelectClick = { _, _, _ -> },
+                onFieldUpdated = { _, _ -> }
             )
         }
     }
@@ -544,12 +556,10 @@ private fun RequiredFieldsPreview() {
         Column(Modifier.background(MaterialTheme.appColors.background)) {
             RequiredFields(
                 fields = listOf(field, field, field),
-                mapFields = SnapshotStateMap(),
                 showErrorMap = SnapshotStateMap(),
                 selectableNamesMap = SnapshotStateMap(),
-                onSelectClick = { _, _, _ ->
-
-                }
+                onSelectClick = { _, _, _ -> },
+                onFieldUpdated = { _, _ -> }
             )
         }
     }
@@ -585,4 +595,4 @@ private val field = RegistrationField(
     restrictions = RegistrationField.Restrictions(),
     options = listOf(option, option),
     errorInstructions = ""
-)
\ No newline at end of file
+)
diff --git a/auth/src/main/java/org/openedx/auth/presentation/ui/SocialAuthView.kt b/auth/src/main/java/org/openedx/auth/presentation/ui/SocialAuthView.kt
new file mode 100644
index 000000000..c9d73662b
--- /dev/null
+++ b/auth/src/main/java/org/openedx/auth/presentation/ui/SocialAuthView.kt
@@ -0,0 +1,144 @@
+package org.openedx.auth.presentation.ui
+
+import android.content.res.Configuration
+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.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.openedx.auth.R
+import org.openedx.auth.data.model.AuthType
+import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.OpenEdXOutlinedButton
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+
+@Composable
+internal fun SocialAuthView(
+    modifier: Modifier = Modifier,
+    isGoogleAuthEnabled: Boolean = true,
+    isFacebookAuthEnabled: Boolean = true,
+    isMicrosoftAuthEnabled: Boolean = true,
+    isSignIn: Boolean = false,
+    onEvent: (AuthType) -> Unit,
+) {
+    Column(modifier = modifier) {
+        if (isGoogleAuthEnabled) {
+            val stringRes = if (isSignIn) {
+                R.string.auth_google
+            } else {
+                R.string.auth_continue_google
+            }
+            OpenEdXOutlinedButton(
+                modifier = Modifier
+                    .testTag("btn_google_auth")
+                    .padding(top = 24.dp)
+                    .fillMaxWidth(),
+                backgroundColor = MaterialTheme.appColors.background,
+                borderColor = MaterialTheme.appColors.primary,
+                textColor = Color.Unspecified,
+                onClick = {
+                    onEvent(AuthType.GOOGLE)
+                }
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_auth_google),
+                        contentDescription = null,
+                        tint = Color.Unspecified,
+                    )
+                    Text(
+                        modifier = Modifier
+                            .testTag("txt_google_auth")
+                            .padding(start = 10.dp),
+                        text = stringResource(id = stringRes)
+                    )
+                }
+            }
+        }
+        if (isFacebookAuthEnabled) {
+            val stringRes = if (isSignIn) {
+                R.string.auth_facebook
+            } else {
+                R.string.auth_continue_facebook
+            }
+            OpenEdXButton(
+                width = Modifier
+                    .testTag("btn_facebook_auth")
+                    .padding(top = 12.dp)
+                    .fillMaxWidth(),
+                backgroundColor = MaterialTheme.appColors.authFacebookButtonBackground,
+                onClick = {
+                    onEvent(AuthType.FACEBOOK)
+                }
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_auth_facebook),
+                        contentDescription = null,
+                        tint = MaterialTheme.appColors.buttonText,
+                    )
+                    Text(
+                        modifier = Modifier
+                            .testTag("txt_facebook_auth")
+                            .padding(start = 10.dp),
+                        color = MaterialTheme.appColors.buttonText,
+                        text = stringResource(id = stringRes)
+                    )
+                }
+            }
+        }
+        if (isMicrosoftAuthEnabled) {
+            val stringRes = if (isSignIn) {
+                R.string.auth_microsoft
+            } else {
+                R.string.auth_continue_microsoft
+            }
+            OpenEdXButton(
+                width = Modifier
+                    .testTag("btn_microsoft_auth")
+                    .padding(top = 12.dp)
+                    .fillMaxWidth(),
+                backgroundColor = MaterialTheme.appColors.authMicrosoftButtonBackground,
+                onClick = {
+                    onEvent(AuthType.MICROSOFT)
+                }
+            ) {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_auth_microsoft),
+                        contentDescription = null,
+                        tint = Color.Unspecified,
+                    )
+                    Text(
+                        modifier = Modifier
+                            .testTag("txt_microsoft_auth")
+                            .padding(start = 10.dp),
+                        color = MaterialTheme.appColors.buttonText,
+                        text = stringResource(id = stringRes)
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun SocialAuthViewPreview() {
+    OpenEdXTheme {
+        SocialAuthView() {}
+    }
+}
diff --git a/auth/src/main/res/drawable/ic_auth_facebook.xml b/auth/src/main/res/drawable/ic_auth_facebook.xml
new file mode 100644
index 000000000..b8e7aa393
--- /dev/null
+++ b/auth/src/main/res/drawable/ic_auth_facebook.xml
@@ -0,0 +1,9 @@
+<vector android:height="24dp"
+    android:viewportHeight="512"
+    android:viewportWidth="512"
+    android:width="24dp"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M504,256C504,119 393,8 256,8S8,119 8,256c0,123.78 90.69,226.38 209.25,245V327.69h-63V256h63v-54.64c0,-62.15 37,-96.48 93.67,-96.48 27.14,0 55.52,4.84 55.52,4.84v61h-31.28c-30.8,0 -40.41,19.12 -40.41,38.73V256h68.78l-11,71.69h-57.78V501C413.31,482.38 504,379.78 504,256z" />
+</vector>
diff --git a/auth/src/main/res/drawable/ic_auth_google.xml b/auth/src/main/res/drawable/ic_auth_google.xml
new file mode 100644
index 000000000..95bbcc563
--- /dev/null
+++ b/auth/src/main/res/drawable/ic_auth_google.xml
@@ -0,0 +1,22 @@
+<vector android:height="24dp"
+    android:viewportHeight="128"
+    android:viewportWidth="128"
+    android:width="24dp"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <path
+        android:fillColor="#FBBC05"
+        android:fillType="evenOdd"
+        android:pathData="M27.58,64c0,-4.16 0.69,-8.14 1.92,-11.88L7.94,35.65C3.73,44.18 1.37,53.8 1.37,64c0,10.19 2.37,19.8 6.56,28.33l21.56,-16.5C28.27,72.11 27.58,68.14 27.58,64" />
+    <path
+        android:fillColor="#EA4335"
+        android:fillType="evenOdd"
+        android:pathData="M65.46,26.18c9.03,0 17.19,3.2 23.6,8.44L107.7,16C96.34,6.11 81.77,0 65.46,0C40.13,0 18.36,14.48 7.94,35.65l21.57,16.47C34.48,37.03 48.64,26.18 65.46,26.18" />
+    <path
+        android:fillColor="#34A853"
+        android:fillType="evenOdd"
+        android:pathData="M65.46,101.82c-16.81,0 -30.98,-10.85 -35.95,-25.94L7.94,92.35C18.36,113.52 40.13,128 65.46,128c15.63,0 30.56,-5.55 41.76,-15.95L86.74,96.22C80.96,99.86 73.69,101.82 65.46,101.82" />
+    <path
+        android:fillColor="#4285F4"
+        android:fillType="evenOdd"
+        android:pathData="M126.63,64c0,-3.78 -0.58,-7.86 -1.46,-11.64H65.46v24.73h34.38c-1.72,8.43 -6.4,14.91 -13.09,19.13l20.47,15.83C118.98,101.13 126.63,84.86 126.63,64" />
+</vector>
diff --git a/auth/src/main/res/drawable/ic_auth_microsoft.xml b/auth/src/main/res/drawable/ic_auth_microsoft.xml
new file mode 100644
index 000000000..ce31faab7
--- /dev/null
+++ b/auth/src/main/res/drawable/ic_auth_microsoft.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M11.406,0H0V11.406H11.406V0Z"
+      android:fillColor="#F25022" />
+  <path
+      android:pathData="M24,0H12.594V11.406H24V0Z"
+      android:fillColor="#7FBA00" />
+  <path
+      android:pathData="M11.406,12.594H0V24H11.406V12.594Z"
+      android:fillColor="#00A4EF" />
+  <path
+      android:pathData="M24,12.594H12.594V24H24V12.594Z"
+      android:fillColor="#FFB900" />
+</vector>
diff --git a/auth/src/main/res/values-uk/strings.xml b/auth/src/main/res/values-uk/strings.xml
index 5d2384d9c..c2c34abef 100644
--- a/auth/src/main/res/values-uk/strings.xml
+++ b/auth/src/main/res/values-uk/strings.xml
@@ -1,9 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <string name="auth_sign_in">Увійти</string>
     <string name="auth_sign_up">Зареєструватися</string>
-    <string name="auth_register">Зареєструватися</string>
-    <string name="auth_registration">Реєстрація</string>
     <string name="auth_forgot_password">Забули пароль?</string>
     <string name="auth_email">Електронна пошта</string>
     <string name="auth_invalid_email">Неправильна E-mail адреса</string>
diff --git a/auth/src/main/res/values/strings.xml b/auth/src/main/res/values/strings.xml
index 57b333598..85eb3a47f 100644
--- a/auth/src/main/res/values/strings.xml
+++ b/auth/src/main/res/values/strings.xml
@@ -1,12 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <string name="auth_sign_in">Sign in</string>
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <string name="pre_auth_title" tools:ignore="ExtraTranslation">Courses and programs from the world\'s best universities in your pocket.</string>
+    <string name="pre_auth_search_title" tools:ignore="ExtraTranslation">What do you want to learn?</string>
+    <string name="pre_auth_search_hint" tools:ignore="ExtraTranslation">Search our 3000+ courses</string>
+    <string name="pre_auth_explore_all_courses" tools:ignore="ExtraTranslation">Explore all courses</string>
     <string name="auth_sign_up">Sign up</string>
-    <string name="auth_register">Register</string>
-    <string name="auth_registration">Registration</string>
     <string name="auth_forgot_password">Forgot password?</string>
     <string name="auth_email">Email</string>
     <string name="auth_invalid_email">Invalid email</string>
+    <string name="auth_email_username" tools:ignore="MissingTranslation">Email or Username</string>
+    <string name="auth_invalid_email_username" tools:ignore="MissingTranslation">Invalid email or username</string>
     <string name="auth_invalid_password">Password is too short</string>
     <string name="auth_welcome_back">Welcome back! Please authorize to continue.</string>
     <string name="auth_show_optional_fields">Show optional fields</string>
@@ -18,6 +21,16 @@
     <string name="auth_check_your_email">Check your email</string>
     <string name="auth_restore_password_success">We have sent a password recover instructions to your email %s</string>
     <string name="auth_example_email" translatable="false">username@domain.com</string>
+    <string name="auth_enter_email_username" tools:ignore="MissingTranslation">Enter email or username</string>
     <string name="auth_enter_password">Enter password</string>
     <string name="auth_create_new_account">Create new account.</string>
-</resources>
\ No newline at end of file
+    <string name="auth_compete_registration" translatable="false">Complete your registration</string>
+    <string name="auth_google" tools:ignore="ExtraTranslation">Sign in with Google</string>
+    <string name="auth_facebook" tools:ignore="ExtraTranslation">Sign in with Facebook</string>
+    <string name="auth_microsoft" tools:ignore="ExtraTranslation">Sign in with Microsoft</string>
+    <string name="auth_continue_google" tools:ignore="ExtraTranslation">Continue with Google</string>
+    <string name="auth_continue_facebook" tools:ignore="ExtraTranslation">Continue with Facebook</string>
+    <string name="auth_continue_microsoft" tools:ignore="ExtraTranslation">Continue with Microsoft</string>
+    <string name="auth_social_signed_title" translatable="false">You\'ve successfully signed in with %s.</string>
+    <string name="auth_social_signed_desc" translatable="false">We just need a little more information before you start learning with %s.</string>
+</resources>
diff --git a/auth/src/test/java/org/openedx/auth/presentation/restore/RestorePasswordViewModelTest.kt b/auth/src/test/java/org/openedx/auth/presentation/restore/RestorePasswordViewModelTest.kt
index 895a87739..e80b93db7 100644
--- a/auth/src/test/java/org/openedx/auth/presentation/restore/RestorePasswordViewModelTest.kt
+++ b/auth/src/test/java/org/openedx/auth/presentation/restore/RestorePasswordViewModelTest.kt
@@ -14,6 +14,7 @@ import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.emptyFlow
 import kotlinx.coroutines.test.*
 import org.junit.After
 import org.junit.Assert.*
@@ -21,6 +22,7 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.system.notifier.AppUpgradeNotifier
 import java.net.UnknownHostException
 
 @OptIn(ExperimentalCoroutinesApi::class)
@@ -33,6 +35,7 @@ class RestorePasswordViewModelTest {
     private val resourceManager = mockk<ResourceManager>()
     private val interactor = mockk<AuthInteractor>()
     private val analytics = mockk<AuthAnalytics>()
+    private val appUpgradeNotifier = mockk<AppUpgradeNotifier>()
 
     //region parameters
 
@@ -53,6 +56,7 @@ class RestorePasswordViewModelTest {
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
         every { resourceManager.getString(org.openedx.auth.R.string.auth_invalid_email) } returns invalidEmail
         every { resourceManager.getString(org.openedx.auth.R.string.auth_invalid_password) } returns invalidPassword
+        every { appUpgradeNotifier.notifier } returns emptyFlow()
     }
 
     @After
@@ -62,13 +66,14 @@ class RestorePasswordViewModelTest {
 
     @Test
     fun `passwordReset empty email validation error`() = runTest {
-        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics)
+        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics, appUpgradeNotifier)
         coEvery { interactor.passwordReset(emptyEmail) } returns true
         every { analytics.resetPasswordClickedEvent(false) } returns Unit
         viewModel.passwordReset(emptyEmail)
         advanceUntilIdle()
         coVerify(exactly = 0) { interactor.passwordReset(any()) }
         verify(exactly = 1) { analytics.resetPasswordClickedEvent(false) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
 
@@ -78,13 +83,14 @@ class RestorePasswordViewModelTest {
 
     @Test
     fun `passwordReset invalid email validation error`() = runTest {
-        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics)
+        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics, appUpgradeNotifier)
         coEvery { interactor.passwordReset(invalidEmail) } returns true
         every { analytics.resetPasswordClickedEvent(false) } returns Unit
         viewModel.passwordReset(invalidEmail)
         advanceUntilIdle()
         coVerify(exactly = 0) { interactor.passwordReset(any()) }
         verify(exactly = 1) { analytics.resetPasswordClickedEvent(false) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
 
@@ -94,13 +100,14 @@ class RestorePasswordViewModelTest {
 
     @Test
     fun `passwordReset validation error`() = runTest {
-        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics)
+        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics, appUpgradeNotifier)
         coEvery { interactor.passwordReset(correctEmail) } throws EdxError.ValidationException("error")
         every { analytics.resetPasswordClickedEvent(false) } returns Unit
         viewModel.passwordReset(correctEmail)
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.passwordReset(any()) }
         verify(exactly = 1) { analytics.resetPasswordClickedEvent(false) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
 
@@ -110,13 +117,14 @@ class RestorePasswordViewModelTest {
 
     @Test
     fun `passwordReset no internet error`() = runTest {
-        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics)
+        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics, appUpgradeNotifier)
         coEvery { interactor.passwordReset(correctEmail) } throws UnknownHostException()
         every { analytics.resetPasswordClickedEvent(false) } returns Unit
         viewModel.passwordReset(correctEmail)
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.passwordReset(any()) }
         verify(exactly = 1) { analytics.resetPasswordClickedEvent(false) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
 
@@ -126,13 +134,14 @@ class RestorePasswordViewModelTest {
 
     @Test
     fun `passwordReset unknown error`() = runTest {
-        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics)
+        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics, appUpgradeNotifier)
         coEvery { interactor.passwordReset(correctEmail) } throws Exception()
         every { analytics.resetPasswordClickedEvent(false) } returns Unit
         viewModel.passwordReset(correctEmail)
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.passwordReset(any()) }
         verify(exactly = 1) { analytics.resetPasswordClickedEvent(false) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
 
@@ -142,13 +151,14 @@ class RestorePasswordViewModelTest {
 
     @Test
     fun `unSuccess restore password`() = runTest {
-        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics)
+        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics, appUpgradeNotifier)
         coEvery { interactor.passwordReset(correctEmail) } returns false
         every { analytics.resetPasswordClickedEvent(false) } returns Unit
         viewModel.passwordReset(correctEmail)
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.passwordReset(any()) }
         verify(exactly = 1) { analytics.resetPasswordClickedEvent(false) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
 
@@ -159,13 +169,14 @@ class RestorePasswordViewModelTest {
 
     @Test
     fun `success restore password`() = runTest {
-        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics)
+        val viewModel = RestorePasswordViewModel(interactor, resourceManager, analytics, appUpgradeNotifier)
         coEvery { interactor.passwordReset(correctEmail) } returns true
         every { analytics.resetPasswordClickedEvent(true) } returns Unit
         viewModel.passwordReset(correctEmail)
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.passwordReset(any()) }
         verify(exactly = 1) { analytics.resetPasswordClickedEvent(true) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val state = viewModel.uiState.value as? RestorePasswordUIState.Success
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
diff --git a/auth/src/test/java/org/openedx/auth/presentation/signin/SignInViewModelTest.kt b/auth/src/test/java/org/openedx/auth/presentation/signin/SignInViewModelTest.kt
index 97a4689e9..16b5032c4 100644
--- a/auth/src/test/java/org/openedx/auth/presentation/signin/SignInViewModelTest.kt
+++ b/auth/src/test/java/org/openedx/auth/presentation/signin/SignInViewModelTest.kt
@@ -1,14 +1,6 @@
 package org.openedx.auth.presentation.signin
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import org.openedx.auth.R
-import org.openedx.auth.domain.interactor.AuthInteractor
-import org.openedx.auth.presentation.AuthAnalytics
-import org.openedx.core.UIMessage
-import org.openedx.core.Validator
-import org.openedx.core.domain.model.User
-import org.openedx.core.system.EdxError
-import org.openedx.core.system.ResourceManager
 import io.mockk.coEvery
 import io.mockk.coVerify
 import io.mockk.every
@@ -16,6 +8,7 @@ import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.emptyFlow
 import kotlinx.coroutines.test.StandardTestDispatcher
 import kotlinx.coroutines.test.advanceUntilIdle
 import kotlinx.coroutines.test.resetMain
@@ -23,11 +16,26 @@ import kotlinx.coroutines.test.runTest
 import kotlinx.coroutines.test.setMain
 import org.junit.After
 import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
 import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.auth.R
+import org.openedx.auth.domain.interactor.AuthInteractor
+import org.openedx.auth.presentation.AuthAnalytics
+import org.openedx.auth.presentation.sso.OAuthHelper
+import org.openedx.core.UIMessage
+import org.openedx.core.Validator
+import org.openedx.core.config.Config
+import org.openedx.core.config.FacebookConfig
+import org.openedx.core.config.GoogleConfig
+import org.openedx.core.config.MicrosoftConfig
+import org.openedx.core.data.model.User
 import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.system.EdxError
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.notifier.AppUpgradeNotifier
 import java.net.UnknownHostException
 import org.openedx.core.R as CoreRes
 
@@ -39,16 +47,19 @@ class SignInViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
     private val validator = mockk<Validator>()
     private val resourceManager = mockk<ResourceManager>()
     private val preferencesManager = mockk<CorePreferences>()
     private val interactor = mockk<AuthInteractor>()
     private val analytics = mockk<AuthAnalytics>()
+    private val appUpgradeNotifier = mockk<AppUpgradeNotifier>()
+    private val oAuthHelper = mockk<OAuthHelper>()
 
     private val invalidCredential = "Invalid credentials"
     private val noInternet = "Slow or no internet connection"
     private val somethingWrong = "Something went wrong"
-    private val invalidEmail = "Invalid email"
+    private val invalidEmailOrUsername = "Invalid email or username"
     private val invalidPassword = "Password too short"
 
     private val user = User(0, "", "", "")
@@ -59,8 +70,14 @@ class SignInViewModelTest {
         every { resourceManager.getString(CoreRes.string.core_error_invalid_grant) } returns invalidCredential
         every { resourceManager.getString(CoreRes.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(CoreRes.string.core_error_unknown_error) } returns somethingWrong
-        every { resourceManager.getString(R.string.auth_invalid_email) } returns invalidEmail
+        every { resourceManager.getString(R.string.auth_invalid_email_username) } returns invalidEmailOrUsername
         every { resourceManager.getString(R.string.auth_invalid_password) } returns invalidPassword
+        every { appUpgradeNotifier.notifier } returns emptyFlow()
+        every { config.isPreLoginExperienceEnabled() } returns false
+        every { config.isSocialAuthEnabled() } returns false
+        every { config.getFacebookConfig() } returns FacebookConfig()
+        every { config.getGoogleConfig() } returns GoogleConfig()
+        every { config.getMicrosoftConfig() } returns MicrosoftConfig()
     }
 
     @After
@@ -70,88 +87,134 @@ class SignInViewModelTest {
 
     @Test
     fun `login empty credentials validation error`() = runTest {
-        every { validator.isEmailValid(any()) } returns false
+        every { validator.isEmailOrUserNameValid(any()) } returns false
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         viewModel.login("", "")
         coVerify(exactly = 0) { interactor.login(any(), any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
 
         val message = viewModel.uiMessage.value as UIMessage.SnackBarMessage
-
-        assertEquals(invalidEmail, message.message)
-        assert(viewModel.showProgress.value != true)
-        assert(viewModel.loginSuccess.value != true)
+        val uiState = viewModel.uiState.value
+        assertEquals(invalidEmailOrUsername, message.message)
+        assertFalse(uiState.showProgress)
+        assertFalse(uiState.loginSuccess)
     }
 
     @Test
     fun `login invalid email validation error`() = runTest {
-        every { validator.isEmailValid(any()) } returns false
+        every { validator.isEmailOrUserNameValid(any()) } returns false
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         viewModel.login("acc@test.o", "")
         coVerify(exactly = 0) { interactor.login(any(), any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
 
         val message = viewModel.uiMessage.value as UIMessage.SnackBarMessage
-
-        assertEquals(invalidEmail, message.message)
-        assert(viewModel.showProgress.value != true)
-        assert(viewModel.loginSuccess.value != true)
+        val uiState = viewModel.uiState.value
+        assertEquals(invalidEmailOrUsername, message.message)
+        assertFalse(uiState.showProgress)
+        assertFalse(uiState.loginSuccess)
     }
 
     @Test
     fun `login empty password validation error`() = runTest {
-        every { validator.isEmailValid(any()) } returns true
+        every { validator.isEmailOrUserNameValid(any()) } returns true
         every { validator.isPasswordValid(any()) } returns false
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
         coVerify(exactly = 0) { interactor.login(any(), any()) }
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         viewModel.login("acc@test.org", "")
 
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
-        val message = viewModel.uiMessage.value as UIMessage.SnackBarMessage
 
+        val message = viewModel.uiMessage.value as UIMessage.SnackBarMessage
+        val uiState = viewModel.uiState.value
         assertEquals(invalidPassword, message.message)
-        assert(viewModel.showProgress.value != true)
-        assert(viewModel.loginSuccess.value != true)
+        assertFalse(uiState.showProgress)
+        assertFalse(uiState.loginSuccess)
     }
 
     @Test
     fun `login invalid password validation error`() = runTest {
-        every { validator.isEmailValid(any()) } returns true
+        every { validator.isEmailOrUserNameValid(any()) } returns true
         every { validator.isPasswordValid(any()) } returns false
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         viewModel.login("acc@test.org", "ed")
 
         coVerify(exactly = 0) { interactor.login(any(), any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
 
         val message = viewModel.uiMessage.value as UIMessage.SnackBarMessage
-
+        val uiState = viewModel.uiState.value
         assertEquals(invalidPassword, message.message)
-        assert(viewModel.showProgress.value != true)
-        assert(viewModel.loginSuccess.value != true)
+        assertFalse(uiState.showProgress)
+        assertFalse(uiState.loginSuccess)
     }
 
     @Test
     fun `login success`() = runTest {
-        every { validator.isEmailValid(any()) } returns true
+        every { validator.isEmailOrUserNameValid(any()) } returns true
         every { validator.isPasswordValid(any()) } returns true
         every { analytics.userLoginEvent(any()) } returns Unit
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         coEvery { interactor.login("acc@test.org", "edx") } returns Unit
         viewModel.login("acc@test.org", "edx")
         advanceUntilIdle()
@@ -159,76 +222,106 @@ class SignInViewModelTest {
         coVerify(exactly = 1) { interactor.login(any(), any()) }
         verify(exactly = 1) { analytics.userLoginEvent(any()) }
         verify(exactly = 1) { analytics.setUserIdForSession(any()) }
-
-        assertEquals(false, viewModel.showProgress.value)
-        assertEquals(true, viewModel.loginSuccess.value)
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
+        val uiState = viewModel.uiState.value
+        assertFalse(uiState.showProgress)
+        assert(uiState.loginSuccess)
         assertEquals(null, viewModel.uiMessage.value)
     }
 
     @Test
     fun `login network error`() = runTest {
-        every { validator.isEmailValid(any()) } returns true
+        every { validator.isEmailOrUserNameValid(any()) } returns true
         every { validator.isPasswordValid(any()) } returns true
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         coEvery { interactor.login("acc@test.org", "edx") } throws UnknownHostException()
         viewModel.login("acc@test.org", "edx")
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.login(any(), any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
-
-        assertEquals(false, viewModel.showProgress.value)
-        assert(viewModel.loginSuccess.value != true)
+        val uiState = viewModel.uiState.value
+        assertFalse(uiState.showProgress)
+        assertFalse(uiState.loginSuccess)
         assertEquals(noInternet, message?.message)
     }
 
     @Test
     fun `login invalid grant error`() = runTest {
-        every { validator.isEmailValid(any()) } returns true
+        every { validator.isEmailOrUserNameValid(any()) } returns true
         every { validator.isPasswordValid(any()) } returns true
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         coEvery { interactor.login("acc@test.org", "edx") } throws EdxError.InvalidGrantException()
         viewModel.login("acc@test.org", "edx")
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.login(any(), any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as UIMessage.SnackBarMessage
-
-        assertEquals(false, viewModel.showProgress.value)
-        assert(viewModel.loginSuccess.value != true)
+        val uiState = viewModel.uiState.value
+        assertFalse(uiState.showProgress)
+        assertFalse(uiState.loginSuccess)
         assertEquals(invalidCredential, message.message)
     }
 
     @Test
     fun `login unknown exception`() = runTest {
-        every { validator.isEmailValid(any()) } returns true
+        every { validator.isEmailOrUserNameValid(any()) } returns true
         every { validator.isPasswordValid(any()) } returns true
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        val viewModel =
-            SignInViewModel(interactor, resourceManager, preferencesManager, validator, analytics)
+        val viewModel = SignInViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            preferencesManager = preferencesManager,
+            validator = validator,
+            analytics = analytics,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         coEvery { interactor.login("acc@test.org", "edx") } throws IllegalStateException()
         viewModel.login("acc@test.org", "edx")
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.login(any(), any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as UIMessage.SnackBarMessage
-
-        assertEquals(false, viewModel.showProgress.value)
-        assert(viewModel.loginSuccess.value != true)
+        val uiState = viewModel.uiState.value
+        assertFalse(uiState.showProgress)
+        assertFalse(uiState.loginSuccess)
         assertEquals(somethingWrong, message.message)
     }
-
 }
diff --git a/auth/src/test/java/org/openedx/auth/presentation/signup/SignUpViewModelTest.kt b/auth/src/test/java/org/openedx/auth/presentation/signup/SignUpViewModelTest.kt
index fbd7f4c4a..bd048902c 100644
--- a/auth/src/test/java/org/openedx/auth/presentation/signup/SignUpViewModelTest.kt
+++ b/auth/src/test/java/org/openedx/auth/presentation/signup/SignUpViewModelTest.kt
@@ -1,16 +1,6 @@
 package org.openedx.auth.presentation.signup
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import org.openedx.auth.data.model.ValidationFields
-import org.openedx.auth.domain.interactor.AuthInteractor
-import org.openedx.auth.presentation.AuthAnalytics
-import org.openedx.core.ApiConstants
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.RegistrationField
-import org.openedx.core.domain.model.RegistrationFieldType
-import org.openedx.core.domain.model.User
-import org.openedx.core.system.ResourceManager
 import io.mockk.coEvery
 import io.mockk.coVerify
 import io.mockk.every
@@ -18,6 +8,9 @@ import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.async
+import kotlinx.coroutines.flow.emptyFlow
+import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.test.StandardTestDispatcher
 import kotlinx.coroutines.test.advanceUntilIdle
 import kotlinx.coroutines.test.resetMain
@@ -25,11 +18,29 @@ import kotlinx.coroutines.test.runTest
 import kotlinx.coroutines.test.setMain
 import org.junit.After
 import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
+import org.junit.Assert.assertTrue
 import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.auth.data.model.ValidationFields
+import org.openedx.auth.domain.interactor.AuthInteractor
+import org.openedx.auth.presentation.AuthAnalytics
+import org.openedx.auth.presentation.sso.OAuthHelper
+import org.openedx.core.ApiConstants
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.config.FacebookConfig
+import org.openedx.core.config.GoogleConfig
+import org.openedx.core.config.MicrosoftConfig
+import org.openedx.core.data.model.User
 import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.domain.model.RegistrationField
+import org.openedx.core.domain.model.RegistrationFieldType
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.notifier.AppUpgradeNotifier
 import java.net.UnknownHostException
 
 
@@ -40,21 +51,25 @@ class SignUpViewModelTest {
     val testInstantTaskExecutorRule: TestRule = InstantTaskExecutorRule()
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
     private val resourceManager = mockk<ResourceManager>()
     private val preferencesManager = mockk<CorePreferences>()
     private val interactor = mockk<AuthInteractor>()
     private val analytics = mockk<AuthAnalytics>()
+    private val appUpgradeNotifier = mockk<AppUpgradeNotifier>()
+    private val oAuthHelper = mockk<OAuthHelper>()
 
     //region parameters
 
     private val parametersMap = mapOf(
         ApiConstants.EMAIL to "user@gmail.com",
-        ApiConstants.PASSWORD to "password123"
+        ApiConstants.PASSWORD to "password123",
+        "honor_code" to "true",
     )
 
     private val listOfFields = listOf(
         RegistrationField(
-            "",
+            ApiConstants.EMAIL,
             "",
             RegistrationFieldType.TEXT,
             "",
@@ -66,7 +81,7 @@ class SignUpViewModelTest {
         ),
 
         RegistrationField(
-            "",
+            ApiConstants.PASSWORD,
             "",
             RegistrationFieldType.TEXT,
             "",
@@ -91,7 +106,11 @@ class SignUpViewModelTest {
         every { resourceManager.getString(R.string.core_error_invalid_grant) } returns "Invalid credentials"
         every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
-
+        every { appUpgradeNotifier.notifier } returns emptyFlow()
+        every { config.isSocialAuthEnabled() } returns false
+        every { config.getFacebookConfig() } returns FacebookConfig()
+        every { config.getGoogleConfig() } returns GoogleConfig()
+        every { config.getMicrosoftConfig() } returns MicrosoftConfig()
     }
 
     @After
@@ -101,33 +120,60 @@ class SignUpViewModelTest {
 
     @Test
     fun `register has validation errors`() = runTest {
-        val viewModel = SignUpViewModel(interactor, resourceManager, analytics, preferencesManager)
+        val viewModel = SignUpViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            analytics = analytics,
+            preferencesManager = preferencesManager,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         coEvery { interactor.validateRegistrationFields(parametersMap) } returns ValidationFields(
             parametersMap
         )
+        coEvery { interactor.getRegistrationFields() } returns listOfFields
         every { analytics.createAccountClickedEvent(any()) } returns Unit
         coEvery { interactor.register(parametersMap) } returns Unit
         coEvery { interactor.login("", "") } returns Unit
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        viewModel.register(parametersMap)
+        viewModel.getRegistrationFields()
+        advanceUntilIdle()
+        parametersMap.forEach {
+            viewModel.updateField(it.key, it.value)
+        }
+        viewModel.register()
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.validateRegistrationFields(any()) }
         verify(exactly = 1) { analytics.createAccountClickedEvent(any()) }
         coVerify(exactly = 0) { interactor.register(any()) }
         coVerify(exactly = 0) { interactor.login(any(), any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
-        assertEquals(true, viewModel.validationError.value)
-        assert(viewModel.successLogin.value != true)
-        assert(viewModel.isButtonLoading.value != true)
-        assertEquals(null, viewModel.uiMessage.value)
+        assertEquals(true, viewModel.uiState.value.validationError)
+        assertFalse(viewModel.uiState.value.successLogin)
+        assertFalse(viewModel.uiState.value.isButtonLoading)
     }
 
     @Test
     fun `register no internet error`() = runTest {
-        val viewModel = SignUpViewModel(interactor, resourceManager, analytics, preferencesManager)
+        val viewModel = SignUpViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            analytics = analytics,
+            preferencesManager = preferencesManager,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
+        val deferred = async { viewModel.uiMessage.first() }
+
         coEvery { interactor.validateRegistrationFields(parametersMap) } throws UnknownHostException()
+        coEvery { interactor.getRegistrationFields() } returns listOfFields
         coEvery { interactor.register(parametersMap) } returns Unit
         coEvery {
             interactor.login(
@@ -138,56 +184,80 @@ class SignUpViewModelTest {
         every { analytics.createAccountClickedEvent(any()) } returns Unit
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        viewModel.register(parametersMap)
+        viewModel.getRegistrationFields()
+        advanceUntilIdle()
+        parametersMap.forEach {
+            viewModel.updateField(it.key, it.value)
+        }
+        viewModel.register()
         advanceUntilIdle()
         verify(exactly = 1) { analytics.createAccountClickedEvent(any()) }
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
         coVerify(exactly = 1) { interactor.validateRegistrationFields(any()) }
         coVerify(exactly = 0) { interactor.register(any()) }
         coVerify(exactly = 0) { interactor.login(any(), any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
-        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
-
-        assertEquals(false, viewModel.validationError.value)
-        assert(viewModel.successLogin.value != true)
-        assert(viewModel.isButtonLoading.value != true)
-        assertEquals(noInternet, message?.message)
+        assertFalse(viewModel.uiState.value.validationError)
+        assertFalse(viewModel.uiState.value.successLogin)
+        assertFalse(viewModel.uiState.value.isButtonLoading)
+        assertEquals(noInternet, (deferred.await() as? UIMessage.SnackBarMessage)?.message)
     }
 
     @Test
     fun `something went wrong error`() = runTest {
-        val viewModel = SignUpViewModel(interactor, resourceManager, analytics, preferencesManager)
+        val viewModel = SignUpViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            analytics = analytics,
+            preferencesManager = preferencesManager,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
+        val deferred = async { viewModel.uiMessage.first() }
+
         coEvery { interactor.validateRegistrationFields(parametersMap) } throws Exception()
         coEvery { interactor.register(parametersMap) } returns Unit
         coEvery { interactor.login("", "") } returns Unit
         every { analytics.createAccountClickedEvent(any()) } returns Unit
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        viewModel.register(parametersMap)
+        viewModel.register()
         advanceUntilIdle()
         verify(exactly = 0) { analytics.setUserIdForSession(any()) }
         verify(exactly = 1) { analytics.createAccountClickedEvent(any()) }
         coVerify(exactly = 1) { interactor.validateRegistrationFields(any()) }
         coVerify(exactly = 0) { interactor.register(any()) }
         coVerify(exactly = 0) { interactor.login(any(), any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
-        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
-
-        assertEquals(false, viewModel.validationError.value)
-        assert(viewModel.successLogin.value != true)
-        assert(viewModel.isButtonLoading.value != true)
-        assertEquals(somethingWrong, message?.message)
+        assertFalse(viewModel.uiState.value.validationError)
+        assertFalse(viewModel.uiState.value.successLogin)
+        assertFalse(viewModel.uiState.value.isButtonLoading)
+        assertEquals(somethingWrong, (deferred.await() as? UIMessage.SnackBarMessage)?.message)
     }
 
 
     @Test
     fun `success register`() = runTest {
-        val viewModel = SignUpViewModel(interactor, resourceManager, analytics, preferencesManager)
+        val viewModel = SignUpViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            analytics = analytics,
+            preferencesManager = preferencesManager,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         coEvery { interactor.validateRegistrationFields(parametersMap) } returns ValidationFields(
             emptyMap()
         )
         every { analytics.createAccountClickedEvent(any()) } returns Unit
         every { analytics.registrationSuccessEvent(any()) } returns Unit
+        coEvery { interactor.getRegistrationFields() } returns listOfFields
         coEvery { interactor.register(parametersMap) } returns Unit
         coEvery {
             interactor.login(
@@ -197,7 +267,12 @@ class SignUpViewModelTest {
         } returns Unit
         every { preferencesManager.user } returns user
         every { analytics.setUserIdForSession(any()) } returns Unit
-        viewModel.register(parametersMap)
+        viewModel.getRegistrationFields()
+        advanceUntilIdle()
+        parametersMap.forEach {
+            viewModel.updateField(it.key, it.value)
+        }
+        viewModel.register()
         advanceUntilIdle()
         verify(exactly = 1) { analytics.setUserIdForSession(any()) }
         coVerify(exactly = 1) { interactor.validateRegistrationFields(any()) }
@@ -205,53 +280,81 @@ class SignUpViewModelTest {
         coVerify(exactly = 1) { interactor.login(any(), any()) }
         verify(exactly = 1) { analytics.createAccountClickedEvent(any()) }
         verify(exactly = 1) { analytics.registrationSuccessEvent(any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
-        assertEquals(false, viewModel.validationError.value)
-        assertEquals(false, viewModel.isButtonLoading.value)
-        assertEquals(null, viewModel.uiMessage.value)
-        assertEquals(true, viewModel.successLogin.value)
+        assertFalse(viewModel.uiState.value.validationError)
+        assertFalse(viewModel.uiState.value.isButtonLoading)
+        assertTrue(viewModel.uiState.value.successLogin)
     }
 
     @Test
     fun `getRegistrationFields no internet error`() = runTest {
-        val viewModel = SignUpViewModel(interactor, resourceManager, analytics, preferencesManager)
+        val viewModel = SignUpViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            analytics = analytics,
+            preferencesManager = preferencesManager,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
+        val deferred = async { viewModel.uiMessage.first() }
+
         coEvery { interactor.getRegistrationFields() } throws UnknownHostException()
         viewModel.getRegistrationFields()
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.getRegistrationFields() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
-        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
-
-        assert(viewModel.uiState.value is SignUpUIState.Loading)
-        assertEquals(noInternet, message?.message)
+        assertTrue(viewModel.uiState.value.isLoading)
+        assertEquals(noInternet, (deferred.await() as? UIMessage.SnackBarMessage)?.message)
     }
 
     @Test
     fun `getRegistrationFields unknown error`() = runTest {
-        val viewModel = SignUpViewModel(interactor, resourceManager, analytics, preferencesManager)
+        val viewModel = SignUpViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            analytics = analytics,
+            preferencesManager = preferencesManager,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
+        val deferred = async { viewModel.uiMessage.first() }
+
         coEvery { interactor.getRegistrationFields() } throws Exception()
         viewModel.getRegistrationFields()
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.getRegistrationFields() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
-        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
-
-        assert(viewModel.uiState.value is SignUpUIState.Loading)
-        assertEquals(somethingWrong, message?.message)
+        assertTrue(viewModel.uiState.value.isLoading)
+        assertEquals(somethingWrong, (deferred.await() as? UIMessage.SnackBarMessage)?.message)
     }
 
     @Test
     fun `getRegistrationFields success`() = runTest {
-        val viewModel = SignUpViewModel(interactor, resourceManager, analytics, preferencesManager)
+        val viewModel = SignUpViewModel(
+            interactor = interactor,
+            resourceManager = resourceManager,
+            analytics = analytics,
+            preferencesManager = preferencesManager,
+            appUpgradeNotifier = appUpgradeNotifier,
+            oAuthHelper = oAuthHelper,
+            config = config,
+            courseId = "",
+        )
         coEvery { interactor.getRegistrationFields() } returns listOfFields
         viewModel.getRegistrationFields()
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.getRegistrationFields() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         //val fields = viewModel.uiState.value as? SignUpUIState.Fields
 
-        assert(viewModel.uiState.value is SignUpUIState.Fields)
-        assertEquals(null, viewModel.uiMessage.value)
+        assertFalse(viewModel.uiState.value.isLoading)
     }
-
-}
\ No newline at end of file
+}
diff --git a/build.gradle b/build.gradle
index 3eef5969f..462369006 100644
--- a/build.gradle
+++ b/build.gradle
@@ -1,3 +1,8 @@
+import org.edx.builder.ConfigHelper
+
+import java.util.regex.Matcher
+import java.util.regex.Pattern
+
 buildscript {
     ext {
         kotlin_version = '1.8.21'
@@ -8,8 +13,8 @@ buildscript {
 }
 
 plugins {
-    id 'com.android.application' version '8.1.0' apply false
-    id 'com.android.library' version '8.1.0' apply false
+    id 'com.android.application' version '8.1.1' apply false
+    id 'com.android.library' version '8.1.1' apply false
     id 'org.jetbrains.kotlin.android' version "$kotlin_version" apply false
     id 'com.google.gms.google-services' version '4.3.15' apply false
     id "com.google.firebase.crashlytics" version "2.9.6" apply false
@@ -27,7 +32,7 @@ ext {
     fragment_version = "1.6.1"
     constraintlayout_version = "2.1.4"
     viewpager2_version = "1.0.0"
-    media3 = "1.1.1"
+    media3_version = "1.1.1"
     youtubeplayer_version = "11.1.0"
 
     firebase_version = "32.1.0"
@@ -47,8 +52,35 @@ ext {
 
     window_version = '1.1.0'
 
+    in_app_review = '2.0.1'
+
+    extented_spans_version = "1.3.0"
+
+    configHelper = new ConfigHelper(projectDir, getCurrentFlavor())
+
     //testing
     mockk_version = '1.13.3'
     android_arch_version = '2.2.0'
     junit_version = '4.13.2'
-}
\ No newline at end of file
+}
+
+def getCurrentFlavor() {
+    String tskReqStr = getGradle().getStartParameter().getTaskRequests().toString()
+    Pattern pattern
+    if (tskReqStr.contains("assemble")) // to run ./gradlew assembleRelease to build APK
+        pattern = Pattern.compile("assemble(\\w+)(Release|Debug)")
+    else if (tskReqStr.contains("bundle")) // to run ./gradlew bundleRelease to build .aab
+        pattern = Pattern.compile("bundle(\\w+)(Release|Debug)")
+    else
+        pattern = Pattern.compile("generate(\\w+)(Release|Debug)")
+    Matcher matcher = pattern.matcher(tskReqStr)
+    if (matcher.find()) {
+        return matcher.group(1).toLowerCase()
+    } else {
+        return ""
+    }
+}
+
+task generateMockedRawFile() {
+    doLast { configHelper.generateMicrosoftConfig() }
+}
diff --git a/buildSrc/.gitignore b/buildSrc/.gitignore
new file mode 100644
index 000000000..84c048a73
--- /dev/null
+++ b/buildSrc/.gitignore
@@ -0,0 +1 @@
+/build/
diff --git a/buildSrc/build.gradle b/buildSrc/build.gradle
new file mode 100644
index 000000000..9cc60ef40
--- /dev/null
+++ b/buildSrc/build.gradle
@@ -0,0 +1,9 @@
+repositories {
+    mavenCentral()
+}
+
+dependencies {
+    implementation localGroovy()
+    implementation gradleApi()
+    implementation 'org.yaml:snakeyaml:1.33'
+}
diff --git a/buildSrc/src/main/groovy/org/edx/builder/ConfigHelper.groovy b/buildSrc/src/main/groovy/org/edx/builder/ConfigHelper.groovy
new file mode 100644
index 000000000..ed78319bc
--- /dev/null
+++ b/buildSrc/src/main/groovy/org/edx/builder/ConfigHelper.groovy
@@ -0,0 +1,98 @@
+package org.edx.builder
+
+import groovy.json.JsonBuilder
+import org.yaml.snakeyaml.Yaml
+
+class ConfigHelper {
+    def CONFIG_SETTINGS_YAML_FILENAME = 'config_settings.yaml'
+    def DEFAULT_CONFIG_PATH = './default_config/' + CONFIG_SETTINGS_YAML_FILENAME
+    def CONFIG_DIRECTORY = "config_directory"
+    def CONFIG_MAPPING = "config_mapping"
+    def MAPPINGS_FILENAME = 'file_mappings.yaml'
+    def ANDROID_CONFIG_KEY = "android"
+    def FILES_CONFIG_KEY = "files"
+
+    def configDir = ""
+    def projectDir = ""
+
+    ConfigHelper(projectDir, buildType) {
+        def environment
+        if (buildType == 'develop' || buildType == '') {
+            environment = 'dev'
+        } else {
+            environment = buildType
+        }
+        this.projectDir = projectDir
+        def configFile = new File(CONFIG_SETTINGS_YAML_FILENAME)
+        if (!configFile.exists()) {
+            // parse default configurations if `config_settings.yaml` doesn't exist
+            println("Configurations are missing at " + configFile.path)
+            println("Parsing Default configurations from " + DEFAULT_CONFIG_PATH)
+            configFile = new File(DEFAULT_CONFIG_PATH)
+        }
+        if (!configFile.exists()) {
+            throw new Exception("Configurations are missing at " + configFile.path)
+        }
+
+        def config = new Yaml().load(configFile.newInputStream())
+        if (config[CONFIG_DIRECTORY] && config[CONFIG_MAPPING][environment]) {
+            configDir = config[CONFIG_DIRECTORY] + "/" + config[CONFIG_MAPPING][environment]
+        } else {
+            throw new Exception(environment + "key doesn't exist in " + configFile.path)
+        }
+    }
+
+    def fetchConfig() {
+        def configFilesMapping = new File(configDir + "/" + MAPPINGS_FILENAME)
+        if (!configFilesMapping.exists()) {
+            throw new Exception("Inappropriate config directory format: $configFilesMapping")
+        }
+        def configMappingFiles = new Yaml().load(configFilesMapping.newInputStream())
+        def androidConfigFiles = configMappingFiles.getOrDefault(ANDROID_CONFIG_KEY, {}).getOrDefault(FILES_CONFIG_KEY, [])
+        def androidConfigs = new LinkedHashMap()
+        androidConfigFiles.each { file ->
+            def configFile = new File(configDir + "/" + file)
+            if (configFile.exists()) {
+                def config = new Yaml().load(configFile.newInputStream())
+                androidConfigs.putAll(config)
+            }
+        }
+        return androidConfigs
+    }
+
+    def generateConfigJson() {
+        def config = fetchConfig()
+        def configJsonDir = new File(projectDir.path + "/core/assets/config")
+        configJsonDir.mkdirs()
+        def jsonWriter = new FileWriter(configJsonDir.path + "/config.json")
+        def builder = new JsonBuilder(config)
+        jsonWriter.withWriter {
+            builder.writeTo(it)
+        }
+    }
+
+    def generateMicrosoftConfig() {
+        def config = fetchConfig()
+        def applicationId = config.getOrDefault("APPLICATION_ID", "")
+        def clientId = ""
+        def packageSign = ""
+        def microsoft = config.get("MICROSOFT")
+        if (microsoft) {
+            packageSign = microsoft.getOrDefault("PACKAGE_SIGNATURE", "")
+            clientId = microsoft.getOrDefault("CLIENT_ID", "")
+        }
+        def microsoftConfigsJsonPath = projectDir.path + "/core/src/main/res/raw/"
+        new File(microsoftConfigsJsonPath).mkdirs()
+        def sign = URLEncoder.encode(packageSign, "UTF-8")
+        def configJson = [
+                client_id                     : clientId,
+                authorization_user_agent      : "DEFAULT",
+                redirect_uri                  : "msauth://$applicationId/$sign",
+                account_mode                  : "MULTIPLE",
+                broker_redirect_uri_registered: false
+        ]
+        new FileWriter(microsoftConfigsJsonPath + "/microsoft_auth_config.json").withWriter {
+            it.write(new JsonBuilder(configJson).toPrettyString())
+        }
+    }
+}
diff --git a/config.yaml b/config.yaml
deleted file mode 100644
index 09972a3b6..000000000
--- a/config.yaml
+++ /dev/null
@@ -1,42 +0,0 @@
-environments:
-  DEV:
-    URLS:
-      API_HOST_URL: "https://dev-example.com/"
-      privacyPolicy: "https://dev-example.com/privacy"
-      termsOfService: "https://dev-example.com/tos"
-      contactUs: "https://dev-example.com/contact"
-      FEEDBACK_EMAIL_ADDRESS: "support@example.com"
-    OAUTH_CLIENT_ID: "DEV_OAUTH_CLIENT_ID"
-    FIREBASE:
-      PROJECT_ID: ""
-      APPLICATION_ID: ""
-      API_KEY: ""
-      GCM_SENDER_ID: ""
-  STAGE:
-    URLS:
-      API_HOST_URL: "http://stage-example.com/"
-      privacyPolicy: "http://stage-example.com/privacy"
-      termsOfService: "http://stage-example.com/tos"
-      contactUs: "http://stage-example.com/contact"
-      FEEDBACK_EMAIL_ADDRESS: "support@example.com"
-    OAUTH_CLIENT_ID: "STAGE_OAUTH_CLIENT_ID"
-    FIREBASE:
-      PROJECT_ID: ""
-      APPLICATION_ID: ""
-      API_KEY: ""
-      GCM_SENDER_ID: ""
-  PROD:
-    URLS:
-      API_HOST_URL: "https://example.com/"
-      privacyPolicy: "https://example.com/privacy"
-      termsOfService: "https://example.com/tos"
-      contactUs: "https://example.com/contact"
-      FEEDBACK_EMAIL_ADDRESS: "support@example.com"
-    OAUTH_CLIENT_ID: "PROD_OAUTH_CLIENT_ID"
-    FIREBASE:
-      PROJECT_ID: ""
-      APPLICATION_ID: ""
-      API_KEY: ""
-      GCM_SENDER_ID: ""
-platformName: "OpenEdX"
-platformFullName: "OpenEdX"
\ No newline at end of file
diff --git a/core/.gitignore b/core/.gitignore
index 42afabfd2..7dae43452 100644
--- a/core/.gitignore
+++ b/core/.gitignore
@@ -1 +1,3 @@
-/build
\ No newline at end of file
+/build
+/assets/config/
+microsoft_auth_config.json
diff --git a/core/build.gradle b/core/build.gradle
index 6bce96edf..93928bfc8 100644
--- a/core/build.gradle
+++ b/core/build.gradle
@@ -1,5 +1,3 @@
-import org.yaml.snakeyaml.Yaml
-
 buildscript {
     repositories {
         mavenCentral()
@@ -17,8 +15,9 @@ plugins {
     id 'kotlin-kapt'
 }
 
-
-def config = new Yaml().load(new File("config.yaml").newInputStream())
+def currentFlavour = getCurrentFlavor()
+def config = configHelper.fetchConfig()
+def platformName = config.getOrDefault("PLATFORM_NAME", "OpenEdx").toLowerCase()
 
 android {
     compileSdk 34
@@ -37,66 +36,35 @@ android {
     productFlavors {
         prod {
             dimension 'env'
-
-            def envMap = config.environments.find { it.key == "PROD" }
-            def clientId = envMap.value.OAUTH_CLIENT_ID
-            def envUrls = envMap.value.URLS
-            def firebase = getFirebaseConfig(envMap)
-
-            buildConfigField "String", "BASE_URL", "\"${envUrls.API_HOST_URL}\""
-            buildConfigField "String", "CLIENT_ID", "\"${clientId}\""
-            buildConfigField "String", "FIREBASE_PROJECT_ID", "\"${firebase.projectId}\""
-            buildConfigField "String", "FIREBASE_API_KEY", "\"${firebase.apiKey}\""
-            buildConfigField "String", "FIREBASE_GCM_SENDER_ID", "\"${firebase.gcmSenderId}\""
-            resValue "string", "google_app_id", firebase.appId
-            resValue "string", "platform_name", config.platformName
-            resValue "string", "platform_full_name", config.platformFullName
-            resValue "string", "privacy_policy_link", envUrls.privacyPolicy
-            resValue "string", "terms_of_service_link", envUrls.termsOfService
-            resValue "string", "contact_us_link", envUrls.contactUs
-            resValue "string", "feedback_email_address", envUrls.FEEDBACK_EMAIL_ADDRESS
+            insertBuildConfigFields(currentFlavour, it)
         }
         develop {
             dimension 'env'
-
-            def envMap = config.environments.find { it.key == "DEV" }
-            def clientId = envMap.value.OAUTH_CLIENT_ID
-            def envUrls = envMap.value.URLS
-            def firebase = getFirebaseConfig(envMap)
-
-            buildConfigField "String", "BASE_URL", "\"${envUrls.API_HOST_URL}\""
-            buildConfigField "String", "CLIENT_ID", "\"${clientId}\""
-            buildConfigField "String", "FIREBASE_PROJECT_ID", "\"${firebase.projectId}\""
-            buildConfigField "String", "FIREBASE_API_KEY", "\"${firebase.apiKey}\""
-            buildConfigField "String", "FIREBASE_GCM_SENDER_ID", "\"${firebase.gcmSenderId}\""
-            resValue "string", "google_app_id", firebase.appId
-            resValue "string", "platform_name", config.platformName
-            resValue "string", "platform_full_name", config.platformFullName
-            resValue "string", "privacy_policy_link", envUrls.privacyPolicy
-            resValue "string", "terms_of_service_link", envUrls.termsOfService
-            resValue "string", "contact_us_link", envUrls.contactUs
-            resValue "string", "feedback_email_address", envUrls.FEEDBACK_EMAIL_ADDRESS
+            insertBuildConfigFields(currentFlavour, it)
         }
         stage {
             dimension 'env'
+            insertBuildConfigFields(currentFlavour, it)
+        }
+    }
 
-            def envMap = config.environments.find { it.key == "STAGE" }
-            def clientId = envMap.value.OAUTH_CLIENT_ID
-            def envUrls = envMap.value.URLS
-            def firebase = getFirebaseConfig(envMap)
-
-            buildConfigField "String", "BASE_URL", "\"${envUrls.API_HOST_URL}\""
-            buildConfigField "String", "CLIENT_ID", "\"${clientId}\""
-            buildConfigField "String", "FIREBASE_PROJECT_ID", "\"${firebase.projectId}\""
-            buildConfigField "String", "FIREBASE_API_KEY", "\"${firebase.apiKey}\""
-            buildConfigField "String", "FIREBASE_GCM_SENDER_ID", "\"${firebase.gcmSenderId}\""
-            resValue "string", "google_app_id", firebase.appId
-            resValue "string", "platform_name", config.platformName
-            resValue "string", "platform_full_name", config.platformFullName
-            resValue "string", "privacy_policy_link", envUrls.privacyPolicy
-            resValue "string", "terms_of_service_link", envUrls.termsOfService
-            resValue "string", "contact_us_link", envUrls.contactUs
-            resValue "string", "feedback_email_address", envUrls.FEEDBACK_EMAIL_ADDRESS
+    sourceSets {
+        prod {
+            java.srcDirs = ["src/$platformName"]
+            res.srcDirs = ["src/$platformName/res"]
+        }
+        develop {
+            java.srcDirs = ["src/$platformName"]
+            res.srcDirs = ["src/$platformName/res"]
+        }
+        stage {
+            java.srcDirs = ["src/$platformName"]
+            res.srcDirs = ["src/$platformName/res"]
+        }
+        main {
+            assets {
+                srcDirs 'src/main/assets', 'assets'
+            }
         }
     }
 
@@ -181,35 +149,47 @@ dependencies {
     api "com.google.firebase:firebase-crashlytics-ktx"
     api "com.google.firebase:firebase-analytics-ktx"
 
+    //Play In-App Review
+    api "com.google.android.play:review-ktx:$in_app_review"
+
     testImplementation 'junit:junit:4.13.2'
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
 }
 
-class FirebaseConfig {
-    public String projectId = ""
-    public String appId = ""
-    public String apiKey = ""
-    public String gcmSenderId = ""
+def insertBuildConfigFields(currentFlavour, buildType) {
+    if (currentFlavour == buildType.name) {
+        configHelper.generateConfigJson()
+        configHelper.generateMicrosoftConfig()
+    }
+    def config = configHelper.fetchConfig()
+    def platformName = config.getOrDefault("PLATFORM_NAME", "")
+    def platformFullName = config.getOrDefault("PLATFORM_FULL_NAME", "")
+
+    buildType.resValue "string", "platform_name", platformName
+    buildType.resValue "string", "platform_full_name", platformFullName
+    insertFacebookBuildConfigFields(config, buildType)
+    insertMicrosoftManifestPlaceholder(config, buildType)
 }
 
-def getFirebaseConfig(envMap) {
-    FirebaseConfig config = new FirebaseConfig()
-    if (envMap.value["FIREBASE"] != null) {
-        config.projectId = setValue(envMap.value["FIREBASE"]["PROJECT_ID"])
-        config.appId = setValue(envMap.value["FIREBASE"]["APPLICATION_ID"])
-        config.apiKey = setValue(envMap.value["FIREBASE"]["API_KEY"])
-        config.gcmSenderId = setValue(envMap.value["FIREBASE"]["GCM_SENDER_ID"])
+static def insertFacebookBuildConfigFields(config, buildType) {
+    def facebook = config.get("FACEBOOK")
+    def facebookAppId = ""
+    def facebookClientToken = ""
+    if (facebook) {
+        facebookAppId = facebook.getOrDefault("FACEBOOK_APP_ID", "")
+        facebookClientToken = facebook.getOrDefault("CLIENT_TOKEN", "")
     }
-    return config
+    buildType.resValue "string", "facebook_app_id", facebookAppId
+    buildType.resValue "string", "fb_login_protocol_scheme", "fb$facebookAppId"
+    buildType.resValue "string", "facebook_client_token", facebookClientToken
 }
 
-def setValue(value) {
-    def result
-    if (value == null) {
-        result = ""
-    } else {
-        result = value
+static def insertMicrosoftManifestPlaceholder(config, buildType) {
+    def microsoft = config.get("MICROSOFT")
+    def microsoftPackageSignature = ""
+    if (microsoft) {
+        microsoftPackageSignature = microsoft.getOrDefault("PACKAGE_SIGNATURE", "")
     }
-    return result
+    buildType.manifestPlaceholders = [microsoftSignature: microsoftPackageSignature]
 }
diff --git a/core/consumer-rules.pro b/core/consumer-rules.pro
index e69de29bb..894a21021 100644
--- a/core/consumer-rules.pro
+++ b/core/consumer-rules.pro
@@ -0,0 +1,2 @@
+-dontwarn java.lang.invoke.StringConcatFactory
+-dontwarn org.openedx.core.R$string
\ No newline at end of file
diff --git a/core/proguard-rules.pro b/core/proguard-rules.pro
index 481bb4348..a6be9313d 100644
--- a/core/proguard-rules.pro
+++ b/core/proguard-rules.pro
@@ -18,4 +18,6 @@
 
 # If you keep the line number information, uncomment this to
 # hide the original source file name.
-#-renamesourcefileattribute SourceFile
\ No newline at end of file
+#-renamesourcefileattribute SourceFile
+
+-dontwarn java.lang.invoke.StringConcatFactory
\ No newline at end of file
diff --git a/core/src/main/AndroidManifest.xml b/core/src/main/AndroidManifest.xml
index 8c4c98268..0caf8d00a 100644
--- a/core/src/main/AndroidManifest.xml
+++ b/core/src/main/AndroidManifest.xml
@@ -1,5 +1,50 @@
 <?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission
+        android:name="com.google.android.gms.permission.AD_ID"
+        tools:node="remove" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
-</manifest>
\ No newline at end of file
+
+    <application>
+        <activity
+            android:name="com.facebook.FacebookActivity"
+            android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
+            android:label="@string/app_name" />
+        <activity
+            android:name="com.facebook.CustomTabActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+
+                <data android:scheme="@string/fb_login_protocol_scheme" />
+            </intent-filter>
+        </activity>
+        <activity
+            android:name="com.microsoft.identity.client.BrowserTabActivity"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.VIEW" />
+
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+
+                <data
+                    android:host="${applicationId}"
+                    android:path="/${microsoftSignature}"
+                    android:scheme="msauth" />
+            </intent-filter>
+        </activity>
+
+        <meta-data
+            android:name="com.facebook.sdk.ApplicationId"
+            android:value="@string/facebook_app_id" />
+        <meta-data
+            android:name="com.facebook.sdk.ClientToken"
+            android:value="@string/facebook_client_token" />
+    </application>
+</manifest>
diff --git a/core/src/main/java/org/openedx/core/ApiConstants.kt b/core/src/main/java/org/openedx/core/ApiConstants.kt
index 82486f593..558df5434 100644
--- a/core/src/main/java/org/openedx/core/ApiConstants.kt
+++ b/core/src/main/java/org/openedx/core/ApiConstants.kt
@@ -3,6 +3,7 @@ package org.openedx.core
 object ApiConstants {
     const val URL_LOGIN = "/oauth2/login/"
     const val URL_ACCESS_TOKEN = "/oauth2/access_token/"
+    const val URL_EXCHANGE_TOKEN = "/oauth2/exchange_access_token/{auth_type}/"
     const val GET_USER_PROFILE = "/api/mobile/v0.5/my_user_info"
     const val URL_REVOKE_TOKEN = "/oauth2/revoke_token/"
     const val URL_REGISTRATION_FIELDS = "/user_api/v1/account/registration"
@@ -12,10 +13,21 @@ object ApiConstants {
 
     const val GRANT_TYPE_PASSWORD = "password"
 
-    const val TOKEN_TYPE_REFRESH = "refresh_token"
-
     const val TOKEN_TYPE_BEARER = "Bearer"
+    const val TOKEN_TYPE_JWT = "jwt"
+    const val TOKEN_TYPE_REFRESH = "refresh_token"
 
+    const val ACCESS_TOKEN = "access_token"
+    const val CLIENT_ID = "client_id"
     const val EMAIL = "email"
+    const val HONOR_CODE = "honor_code"
+    const val NAME = "name"
     const val PASSWORD = "password"
-}
\ No newline at end of file
+    const val PROVIDER = "provider"
+
+    const val AUTH_TYPE_GOOGLE = "google-oauth2"
+    const val AUTH_TYPE_FB = "facebook"
+    const val AUTH_TYPE_MICROSOFT = "azuread-oauth2"
+
+    const val COURSE_KEY = "course_key"
+}
diff --git a/core/src/main/java/org/openedx/core/AppUpdateState.kt b/core/src/main/java/org/openedx/core/AppUpdateState.kt
new file mode 100644
index 000000000..bf347cd29
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/AppUpdateState.kt
@@ -0,0 +1,34 @@
+package org.openedx.core
+
+import android.content.ActivityNotFoundException
+import android.content.Context
+import android.content.Intent
+import android.net.Uri
+import androidx.compose.runtime.mutableStateOf
+import org.openedx.core.system.notifier.AppUpgradeEvent
+
+object AppUpdateState {
+    var wasUpdateDialogDisplayed = false
+    var wasUpdateDialogClosed = mutableStateOf(false)
+
+    fun openPlayMarket(context: Context) {
+        try {
+            context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=${context.packageName}")))
+        } catch (e: ActivityNotFoundException) {
+            context.startActivity(
+                Intent(
+                    Intent.ACTION_VIEW,
+                    Uri.parse("https://play.google.com/store/apps/details?id=${context.packageName}")
+                )
+            )
+        }
+    }
+
+    data class AppUpgradeParameters(
+        val appUpgradeEvent: AppUpgradeEvent? = null,
+        val wasUpdateDialogClosed: Boolean = AppUpdateState.wasUpdateDialogClosed.value,
+        val appUpgradeRecommendedDialog: () -> Unit = {},
+        val onAppUpgradeRecommendedBoxClick: () -> Unit = {},
+        val onAppUpgradeRequired: () -> Unit = {},
+    )
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/BlockType.kt b/core/src/main/java/org/openedx/core/BlockType.kt
index dc1862395..07a7bf882 100644
--- a/core/src/main/java/org/openedx/core/BlockType.kt
+++ b/core/src/main/java/org/openedx/core/BlockType.kt
@@ -14,7 +14,8 @@ enum class BlockType {
     SEQUENTIAL{ override fun isContainer() = true },
     VERTICAL{ override fun isContainer() = true },
     VIDEO{ override fun isContainer() = false },
-    WORD_CLOUD{ override fun isContainer() = false };
+    WORD_CLOUD{ override fun isContainer() = false },
+    SURVEY{ override fun isContainer() = false };
 
     abstract fun isContainer() : Boolean
 
@@ -26,9 +27,24 @@ enum class BlockType {
             return try {
                 BlockType.valueOf(actualType.uppercase())
             } catch (e : Exception){
-                BlockType.OTHERS
+                OTHERS
             }
         }
+
+        fun sortByPriority(blockTypes: List<BlockType>): List<BlockType> {
+            val priorityMap = mapOf(
+                PROBLEM to 1,
+                VIDEO to 2,
+                DISCUSSION to 3,
+                HTML to 4
+            )
+            val comparator = Comparator<BlockType> { blockType1, blockType2 ->
+                val priority1 = priorityMap[blockType1] ?: Int.MAX_VALUE
+                val priority2 = priorityMap[blockType2] ?: Int.MAX_VALUE
+                priority1 - priority2
+            }
+            return blockTypes.sortedWith(comparator)
+        }
     }
 }
 
diff --git a/core/src/main/java/org/openedx/core/Validator.kt b/core/src/main/java/org/openedx/core/Validator.kt
index ca758a071..cb3a66ae6 100644
--- a/core/src/main/java/org/openedx/core/Validator.kt
+++ b/core/src/main/java/org/openedx/core/Validator.kt
@@ -4,15 +4,19 @@ import java.util.regex.Pattern
 
 class Validator {
 
-    fun isEmailValid(email: String): Boolean {
-        val validEmailAddressRegex =
-            Pattern.compile("^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,6}$", Pattern.CASE_INSENSITIVE)
-        val matcher = validEmailAddressRegex.matcher(email)
-        return matcher.find()
+    fun isEmailOrUserNameValid(input: String): Boolean {
+        return if (input.contains("@")) {
+            val validEmailAddressRegex = Pattern.compile(
+                "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,6}$", Pattern.CASE_INSENSITIVE
+            )
+            validEmailAddressRegex.matcher(input).find()
+        } else {
+            input.isNotBlank() && input.contains(" ").not()
+        }
     }
 
     fun isPasswordValid(password: String): Boolean {
         return password.length >= 2
     }
 
-}
\ No newline at end of file
+}
diff --git a/core/src/main/java/org/openedx/core/config/AgreementUrlsConfig.kt b/core/src/main/java/org/openedx/core/config/AgreementUrlsConfig.kt
new file mode 100644
index 000000000..8532ba53a
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/AgreementUrlsConfig.kt
@@ -0,0 +1,57 @@
+package org.openedx.core.config
+
+import android.net.Uri
+import com.google.gson.annotations.SerializedName
+import org.openedx.core.domain.model.Agreement
+import org.openedx.core.domain.model.AgreementUrls
+
+internal data class AgreementUrlsConfig(
+    @SerializedName("PRIVACY_POLICY_URL")
+    private val privacyPolicyUrl: String = "",
+    @SerializedName("COOKIE_POLICY_URL")
+    private val cookiePolicyUrl: String = "",
+    @SerializedName("DATA_SELL_CONSENT_URL")
+    private val dataSellConsentUrl: String = "",
+    @SerializedName("TOS_URL")
+    private val tosUrl: String = "",
+    @SerializedName("EULA_URL")
+    private val eulaUrl: String = "",
+    @SerializedName("SUPPORTED_LANGUAGES")
+    private val supportedLanguages: List<String> = emptyList(),
+) {
+    fun mapToDomain(): Agreement {
+        val defaultAgreementUrls = AgreementUrls(
+            privacyPolicyUrl = privacyPolicyUrl,
+            cookiePolicyUrl = cookiePolicyUrl,
+            dataSellConsentUrl = dataSellConsentUrl,
+            tosUrl = tosUrl,
+            eulaUrl = eulaUrl,
+            supportedLanguages = supportedLanguages,
+        )
+        val agreementUrls = if (supportedLanguages.isNotEmpty()) {
+            supportedLanguages.associateWith {
+                AgreementUrls(
+                    privacyPolicyUrl = privacyPolicyUrl.appendLocale(it),
+                    cookiePolicyUrl = cookiePolicyUrl.appendLocale(it),
+                    dataSellConsentUrl = dataSellConsentUrl.appendLocale(it),
+                    tosUrl = tosUrl.appendLocale(it),
+                    eulaUrl = eulaUrl.appendLocale(it),
+                    supportedLanguages = supportedLanguages,
+                )
+            }
+        } else {
+            mapOf()
+        }
+        return Agreement(agreementUrls, defaultAgreementUrls)
+    }
+
+    private fun String.appendLocale(locale: String): String {
+        if (this.isBlank()) return this
+        val uri = Uri.parse(this)
+        return Uri.Builder().scheme(uri.scheme)
+            .authority(uri.authority)
+            .appendPath(locale + uri.encodedPath)
+            .build()
+            .toString()
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/config/Config.kt b/core/src/main/java/org/openedx/core/config/Config.kt
new file mode 100644
index 000000000..8739c4cfa
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/Config.kt
@@ -0,0 +1,167 @@
+package org.openedx.core.config
+
+import android.content.Context
+import com.google.gson.Gson
+import com.google.gson.JsonElement
+import com.google.gson.JsonObject
+import com.google.gson.JsonParser
+import org.openedx.core.domain.model.AgreementUrls
+import java.io.InputStreamReader
+
+class Config(context: Context) {
+
+    private var configProperties: JsonObject
+
+    init {
+        configProperties = try {
+            val inputStream = context.assets.open("config/config.json")
+            val parser = JsonParser()
+            val config = parser.parse(InputStreamReader(inputStream))
+            config.asJsonObject
+        } catch (e: Exception) {
+            JsonObject()
+        }
+    }
+
+    fun getApiHostURL(): String {
+        return getString(API_HOST_URL, "")
+    }
+
+    fun getUriScheme(): String {
+        return getString(URI_SCHEME, "")
+    }
+
+    fun getOAuthClientId(): String {
+        return getString(OAUTH_CLIENT_ID, "")
+    }
+
+    fun getAccessTokenType(): String {
+        return getString(TOKEN_TYPE, "")
+    }
+
+    fun getFaqUrl(): String {
+        return getString(FAQ_URL, "")
+    }
+
+    fun getFeedbackEmailAddress(): String {
+        return getString(FEEDBACK_EMAIL_ADDRESS, "")
+    }
+
+    fun getAgreement(locale: String): AgreementUrls {
+        val agreement =
+            getObjectOrNewInstance(AGREEMENT_URLS, AgreementUrlsConfig::class.java).mapToDomain()
+        return agreement.getAgreementForLocale(locale)
+    }
+
+    fun getFirebaseConfig(): FirebaseConfig {
+        return getObjectOrNewInstance(FIREBASE, FirebaseConfig::class.java)
+    }
+
+    fun getFacebookConfig(): FacebookConfig {
+        return getObjectOrNewInstance(FACEBOOK, FacebookConfig::class.java)
+    }
+
+    fun getGoogleConfig(): GoogleConfig {
+        return getObjectOrNewInstance(GOOGLE, GoogleConfig::class.java)
+    }
+
+    fun getMicrosoftConfig(): MicrosoftConfig {
+        return getObjectOrNewInstance(MICROSOFT, MicrosoftConfig::class.java)
+    }
+
+    fun isSocialAuthEnabled() = getBoolean(SOCIAL_AUTH_ENABLED, false)
+
+    fun getDiscoveryConfig(): DiscoveryConfig {
+        return getObjectOrNewInstance(DISCOVERY, DiscoveryConfig::class.java)
+    }
+
+    fun getProgramConfig(): ProgramConfig {
+        return getObjectOrNewInstance(PROGRAM, ProgramConfig::class.java)
+    }
+
+    fun isWhatsNewEnabled(): Boolean {
+        return getBoolean(WHATS_NEW_ENABLED, false)
+    }
+
+    fun isPreLoginExperienceEnabled(): Boolean {
+        return getBoolean(PRE_LOGIN_EXPERIENCE_ENABLED, true)
+    }
+
+    fun isCourseNestedListEnabled(): Boolean {
+        return getBoolean(COURSE_NESTED_LIST_ENABLED, false)
+    }
+
+    fun isCourseBannerEnabled(): Boolean {
+        return getBoolean(COURSE_BANNER_ENABLED, true)
+    }
+
+    fun isCourseTopTabBarEnabled(): Boolean {
+        return getBoolean(COURSE_TOP_TAB_BAR_ENABLED, false)
+    }
+
+    fun isCourseUnitProgressEnabled(): Boolean {
+        return getBoolean(COURSE_UNIT_PROGRESS_ENABLED, false)
+    }
+
+    private fun getString(key: String, defaultValue: String): String {
+        val element = getObject(key)
+        return if (element != null) {
+            element.asString
+        } else {
+            defaultValue
+        }
+    }
+
+    private fun getBoolean(key: String, defaultValue: Boolean): Boolean {
+        val element = getObject(key)
+        return element?.asBoolean ?: defaultValue
+    }
+
+    private fun <T> getObjectOrNewInstance(key: String, cls: Class<T>): T {
+        val element = getObject(key)
+        return if (element != null) {
+            val gson = Gson()
+            gson.fromJson(element, cls)
+        } else {
+            try {
+                cls.getDeclaredConstructor().newInstance()
+            } catch (e: InstantiationException) {
+                throw RuntimeException(e)
+            } catch (e: IllegalAccessException) {
+                throw RuntimeException(e)
+            }
+        }
+    }
+
+    private fun getObject(key: String): JsonElement? {
+        return configProperties.get(key)
+    }
+
+    companion object {
+        private const val API_HOST_URL = "API_HOST_URL"
+        private const val URI_SCHEME = "URI_SCHEME"
+        private const val OAUTH_CLIENT_ID = "OAUTH_CLIENT_ID"
+        private const val TOKEN_TYPE = "TOKEN_TYPE"
+        private const val FAQ_URL = "FAQ_URL"
+        private const val FEEDBACK_EMAIL_ADDRESS = "FEEDBACK_EMAIL_ADDRESS"
+        private const val AGREEMENT_URLS = "AGREEMENT_URLS"
+        private const val WHATS_NEW_ENABLED = "WHATS_NEW_ENABLED"
+        private const val SOCIAL_AUTH_ENABLED = "SOCIAL_AUTH_ENABLED"
+        private const val FIREBASE = "FIREBASE"
+        private const val FACEBOOK = "FACEBOOK"
+        private const val GOOGLE = "GOOGLE"
+        private const val MICROSOFT = "MICROSOFT"
+        private const val PRE_LOGIN_EXPERIENCE_ENABLED = "PRE_LOGIN_EXPERIENCE_ENABLED"
+        private const val DISCOVERY = "DISCOVERY"
+        private const val PROGRAM = "PROGRAM"
+        private const val COURSE_NESTED_LIST_ENABLED = "COURSE_NESTED_LIST_ENABLED"
+        private const val COURSE_BANNER_ENABLED = "COURSE_BANNER_ENABLED"
+        private const val COURSE_TOP_TAB_BAR_ENABLED = "COURSE_TOP_TAB_BAR_ENABLED"
+        private const val COURSE_UNIT_PROGRESS_ENABLED = "COURSE_UNIT_PROGRESS_ENABLED"
+    }
+
+    enum class ViewType {
+        NATIVE,
+        WEBVIEW
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/config/DiscoveryConfig.kt b/core/src/main/java/org/openedx/core/config/DiscoveryConfig.kt
new file mode 100644
index 000000000..f94a9d753
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/DiscoveryConfig.kt
@@ -0,0 +1,27 @@
+package org.openedx.core.config
+
+import com.google.gson.annotations.SerializedName
+
+data class DiscoveryConfig(
+    @SerializedName("TYPE")
+    private val viewType: String = Config.ViewType.NATIVE.name,
+
+    @SerializedName("WEBVIEW")
+    val webViewConfig: DiscoveryWebViewConfig = DiscoveryWebViewConfig(),
+) {
+
+    fun isViewTypeWebView(): Boolean {
+        return Config.ViewType.WEBVIEW.name.equals(viewType, ignoreCase = true)
+    }
+}
+
+data class DiscoveryWebViewConfig(
+    @SerializedName("BASE_URL")
+    val baseUrl: String = "",
+
+    @SerializedName("COURSE_DETAIL_TEMPLATE")
+    val courseUrlTemplate: String = "",
+
+    @SerializedName("PROGRAM_DETAIL_TEMPLATE")
+    val programUrlTemplate: String = "",
+)
diff --git a/core/src/main/java/org/openedx/core/config/FacebookConfig.kt b/core/src/main/java/org/openedx/core/config/FacebookConfig.kt
new file mode 100644
index 000000000..f000aacea
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/FacebookConfig.kt
@@ -0,0 +1,14 @@
+package org.openedx.core.config
+
+import com.google.gson.annotations.SerializedName
+
+data class FacebookConfig(
+    @SerializedName("ENABLED")
+    private val enabled: Boolean = false,
+    @SerializedName("FACEBOOK_APP_ID")
+    val appId: String = "",
+    @SerializedName("CLIENT_TOKEN")
+    val clientToken: String = "",
+) {
+    fun isEnabled() = enabled && appId.isNotBlank() && clientToken.isNotBlank()
+}
diff --git a/core/src/main/java/org/openedx/core/config/FirebaseConfig.kt b/core/src/main/java/org/openedx/core/config/FirebaseConfig.kt
new file mode 100644
index 000000000..b003c3230
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/FirebaseConfig.kt
@@ -0,0 +1,20 @@
+package org.openedx.core.config
+
+import com.google.gson.annotations.SerializedName
+
+data class FirebaseConfig(
+    @SerializedName("ENABLED")
+    val enabled: Boolean = false,
+
+    @SerializedName("PROJECT_ID")
+    val projectId: String = "",
+
+    @SerializedName("APPLICATION_ID")
+    val applicationId: String = "",
+
+    @SerializedName("API_KEY")
+    val apiKey: String = "",
+
+    @SerializedName("GCM_SENDER_ID")
+    val gcmSenderId: String = "",
+)
diff --git a/core/src/main/java/org/openedx/core/config/GoogleConfig.kt b/core/src/main/java/org/openedx/core/config/GoogleConfig.kt
new file mode 100644
index 000000000..5db7baffb
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/GoogleConfig.kt
@@ -0,0 +1,12 @@
+package org.openedx.core.config
+
+import com.google.gson.annotations.SerializedName
+
+data class GoogleConfig(
+    @SerializedName("ENABLED")
+    private val enabled: Boolean = false,
+    @SerializedName("CLIENT_ID")
+    val clientId: String = "",
+) {
+    fun isEnabled() = enabled && clientId.isNotBlank()
+}
diff --git a/core/src/main/java/org/openedx/core/config/MicrosoftConfig.kt b/core/src/main/java/org/openedx/core/config/MicrosoftConfig.kt
new file mode 100644
index 000000000..e24953f98
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/MicrosoftConfig.kt
@@ -0,0 +1,14 @@
+package org.openedx.core.config
+
+import com.google.gson.annotations.SerializedName
+
+data class MicrosoftConfig(
+    @SerializedName("ENABLED")
+    private val enabled: Boolean = false,
+    @SerializedName("CLIENT_ID")
+    val clientId: String = "",
+    @SerializedName("PACKAGE_SIGNATURE")
+    val packageSignature: String = "",
+) {
+    fun isEnabled() = enabled && clientId.isNotBlank() && packageSignature.isNotBlank()
+}
diff --git a/core/src/main/java/org/openedx/core/config/ProgramConfig.kt b/core/src/main/java/org/openedx/core/config/ProgramConfig.kt
new file mode 100644
index 000000000..55714dadc
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/config/ProgramConfig.kt
@@ -0,0 +1,21 @@
+package org.openedx.core.config
+
+import com.google.gson.annotations.SerializedName
+
+data class ProgramConfig(
+    @SerializedName("TYPE")
+    private val viewType: String = Config.ViewType.NATIVE.name,
+    @SerializedName("WEBVIEW")
+    val webViewConfig: ProgramWebViewConfig = ProgramWebViewConfig(),
+){
+    fun isViewTypeWebView(): Boolean {
+        return Config.ViewType.WEBVIEW.name.equals(viewType, ignoreCase = true)
+    }
+}
+
+data class ProgramWebViewConfig(
+    @SerializedName("PROGRAM_URL")
+    val programUrl: String = "",
+    @SerializedName("PROGRAM_DETAIL_URL_TEMPLATE")
+    val programDetailUrlTemplate: String = "",
+)
diff --git a/core/src/main/java/org/openedx/core/data/api/CourseApi.kt b/core/src/main/java/org/openedx/core/data/api/CourseApi.kt
index 89538252d..64e749a26 100644
--- a/core/src/main/java/org/openedx/core/data/api/CourseApi.kt
+++ b/core/src/main/java/org/openedx/core/data/api/CourseApi.kt
@@ -1,24 +1,25 @@
 package org.openedx.core.data.api
 
-import org.openedx.core.data.model.*
 import okhttp3.ResponseBody
+import org.openedx.core.data.model.*
 import retrofit2.http.*
 
 interface CourseApi {
 
-    @GET("/mobile_api_extensions/v1/users/{username}/course_enrollments")
+    @GET("/api/mobile/v3/users/{username}/course_enrollments/")
     suspend fun getEnrolledCourses(
         @Header("Cache-Control") cacheControlHeaderParam: String? = null,
         @Path("username") username: String,
         @Query("org") org: String? = null,
         @Query("page") page: Int
-    ): DashboardCourseList
+    ): CourseEnrollments
 
-    @GET("/mobile_api_extensions/courses/v1/courses/")
+    @GET("/api/courses/v1/courses/")
     suspend fun getCourseList(
         @Query("search_term") searchQuery: String? = null,
         @Query("page") page: Int,
         @Query("mobile") mobile: Boolean,
+        @Query("mobile_search") mobileSearch: Boolean,
         @Query("username") username: String? = null,
         @Query("org") org: String? = null,
         @Query("permissions") permission: List<String> = listOf(
@@ -28,15 +29,14 @@ interface CourseApi {
         )
     ): CourseList
 
-    @GET("/mobile_api_extensions/v1/courses/{course_id}")
+    @GET("/api/courses/v1/courses/{course_id}")
     suspend fun getCourseDetail(
         @Path("course_id") courseId: String?,
-        @Query("username") username: String? = null,
-        @Query("is_enrolled") isEnrolled: Boolean = true,
+        @Query("username") username: String? = null
     ): CourseDetails
 
     @GET(
-        "/mobile_api_extensions/{api_version}/blocks/?" +
+        "/api/mobile/{api_version}/course_info/blocks/?" +
                 "depth=all&" +
                 "requested_fields=contains_gated_content,show_gated_sections,special_exam_info,graded,format,student_view_multi_device,due,completion&" +
                 "student_view_data=video,discussion&" +
@@ -65,6 +65,15 @@ interface CourseApi {
         blocksCompletionBody: BlocksCompletionBody
     )
 
+    @GET("/api/course_home/v1/dates/{course_id}")
+    suspend fun getCourseDates(@Path("course_id") courseId: String): CourseDates
+
+    @POST("/api/course_experience/v1/reset_course_deadlines")
+    suspend fun resetCourseDates(@Body courseBody: Map<String, String>): ResetCourseDates
+
+    @GET("/api/course_experience/v1/course_deadlines_info/{course_id}")
+    suspend fun getDatesBannerInfo(@Path("course_id") courseId: String): CourseDatesBannerInfo
+
     @GET("/api/mobile/v1/course_info/{course_id}/handouts")
     suspend fun getHandouts(@Path("course_id") courseId: String): HandoutsModel
 
diff --git a/core/src/main/java/org/openedx/core/data/model/Block.kt b/core/src/main/java/org/openedx/core/data/model/Block.kt
index 4ddc549a0..9c07367ac 100644
--- a/core/src/main/java/org/openedx/core/data/model/Block.kt
+++ b/core/src/main/java/org/openedx/core/data/model/Block.kt
@@ -30,23 +30,38 @@ data class Block(
     @SerializedName("block_counts")
     val blockCounts: BlockCounts?,
     @SerializedName("completion")
-    val completion: Double?
+    val completion: Double?,
+    @SerializedName("contains_gated_content")
+    val containsGatedContent: Boolean?,
 ) {
-    fun mapToDomain(): Block {
+    fun mapToDomain(blockData: Map<String, org.openedx.core.data.model.Block>): Block {
+        val blockType = BlockType.getBlockType(type ?: "")
+        val descendantsType = if (blockType == BlockType.VERTICAL) {
+            val types = descendants?.map { descendant ->
+                BlockType.getBlockType(blockData[descendant]?.type ?: "")
+            } ?: emptyList()
+            val sortedBlockTypes = BlockType.sortByPriority(types)
+            sortedBlockTypes.firstOrNull() ?: blockType
+        } else {
+            blockType
+        }
+
         return org.openedx.core.domain.model.Block(
             id = id ?: "",
             blockId = blockId ?: "",
             lmsWebUrl = lmsWebUrl ?: "",
             legacyWebUrl = legacyWebUrl ?: "",
             studentViewUrl = studentViewUrl ?: "",
-            type = BlockType.getBlockType(type ?: ""),
+            type = blockType,
             displayName = displayName ?: "",
             descendants = descendants ?: emptyList(),
+            descendantsType = descendantsType,
             graded = graded ?: false,
             studentViewData = studentViewData?.mapToDomain(),
             studentViewMultiDevice = studentViewMultiDevice ?: false,
             blockCounts = blockCounts?.mapToDomain()!!,
-            completion = completion ?: 0.0
+            completion = completion ?: 0.0,
+            containsGatedContent = containsGatedContent ?: false
         )
     }
 }
diff --git a/core/src/main/java/org/openedx/core/data/model/CourseDateBlock.kt b/core/src/main/java/org/openedx/core/data/model/CourseDateBlock.kt
new file mode 100644
index 000000000..887112845
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/model/CourseDateBlock.kt
@@ -0,0 +1,28 @@
+package org.openedx.core.data.model
+
+import com.google.gson.annotations.SerializedName
+import java.util.*
+
+data class CourseDateBlock(
+    @SerializedName("complete")
+    val complete: Boolean = false,
+    @SerializedName("date")
+    val date: String = "",  // ISO 8601 compliant format
+    @SerializedName("assignment_type")
+    val assignmentType: String? = "",
+    @SerializedName("date_type")
+    val dateType: DateType = DateType.NONE,
+    @SerializedName("description")
+    val description: String = "",
+    @SerializedName("learner_has_access")
+    val learnerHasAccess: Boolean = false,
+    @SerializedName("link")
+    val link: String = "",
+    @SerializedName("link_text")
+    val linkText: String = "",
+    @SerializedName("title")
+    val title: String = "",
+    // component blockId in-case of navigating inside the app for component available in mobile
+    @SerializedName("first_component_block_id")
+    val blockId: String = "",
+)
diff --git a/core/src/main/java/org/openedx/core/data/model/CourseDates.kt b/core/src/main/java/org/openedx/core/data/model/CourseDates.kt
new file mode 100644
index 000000000..97fc3180f
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/model/CourseDates.kt
@@ -0,0 +1,92 @@
+package org.openedx.core.data.model
+
+import com.google.gson.annotations.SerializedName
+import org.openedx.core.domain.model.CourseDatesBannerInfo
+import org.openedx.core.domain.model.CourseDatesResult
+import org.openedx.core.domain.model.DatesSection
+import org.openedx.core.utils.TimeUtils
+import org.openedx.core.utils.addDays
+import org.openedx.core.utils.clearTime
+import org.openedx.core.utils.isToday
+import java.util.Date
+import org.openedx.core.domain.model.CourseDateBlock as DomainCourseDateBlock
+
+data class CourseDates(
+    @SerializedName("course_date_blocks")
+    val courseDateBlocks: List<CourseDateBlock>,
+    @SerializedName("dates_banner_info")
+    val datesBannerInfo: DatesBannerInfo?,
+    @SerializedName("has_ended")
+    val hasEnded: Boolean?,
+) {
+    fun getCourseDatesResult(): CourseDatesResult {
+        return CourseDatesResult(
+            datesSection = getStructuredCourseDates(),
+            courseBanner = getDatesBannerInfo(),
+        )
+    }
+
+    private fun getDatesBannerInfo(): CourseDatesBannerInfo {
+        return CourseDatesBannerInfo(
+            missedDeadlines = datesBannerInfo?.missedDeadlines ?: false,
+            missedGatedContent = datesBannerInfo?.missedGatedContent ?: false,
+            verifiedUpgradeLink = datesBannerInfo?.verifiedUpgradeLink ?: "",
+            contentTypeGatingEnabled = datesBannerInfo?.contentTypeGatingEnabled ?: false,
+            hasEnded = hasEnded ?: false,
+        )
+    }
+
+    private fun getStructuredCourseDates(): LinkedHashMap<DatesSection, List<DomainCourseDateBlock>> {
+        val currentDate = Date()
+        val courseDatesResponse: LinkedHashMap<DatesSection, List<DomainCourseDateBlock>> =
+            LinkedHashMap()
+        val datesList = mapToDomain()
+        // Added dates for completed, past due, today, this week, next week and upcoming
+        courseDatesResponse[DatesSection.COMPLETED] =
+            datesList.filter { it.isCompleted() }.also { datesList.removeAll(it) }
+
+        courseDatesResponse[DatesSection.PAST_DUE] =
+            datesList.filter { currentDate.after(it.date) }.also { datesList.removeAll(it) }
+
+        courseDatesResponse[DatesSection.TODAY] =
+            datesList.filter { it.date.isToday() }.also { datesList.removeAll(it) }
+
+        //Update the date for upcoming comparison without time
+        currentDate.clearTime()
+
+        // for current week except today
+        courseDatesResponse[DatesSection.THIS_WEEK] = datesList.filter {
+            it.date.after(currentDate) && it.date.before(currentDate.addDays(8))
+        }.also { datesList.removeAll(it) }
+
+        // for coming week
+        courseDatesResponse[DatesSection.NEXT_WEEK] = datesList.filter {
+            it.date.after(currentDate.addDays(7)) && it.date.before(currentDate.addDays(15))
+        }.also { datesList.removeAll(it) }
+
+        // for upcoming
+        courseDatesResponse[DatesSection.UPCOMING] = datesList.filter {
+            it.date.after(currentDate.addDays(14))
+        }.also { datesList.removeAll(it) }
+
+        return courseDatesResponse
+    }
+
+    private fun mapToDomain(): MutableList<DomainCourseDateBlock> {
+        return courseDateBlocks.mapNotNull { item ->
+            TimeUtils.iso8601ToDate(item.date)?.let { date ->
+                DomainCourseDateBlock(
+                    title = item.title,
+                    description = item.description,
+                    link = item.link,
+                    blockId = item.blockId,
+                    date = date,
+                    complete = item.complete,
+                    learnerHasAccess = item.learnerHasAccess,
+                    dateType = item.dateType,
+                    assignmentType = item.assignmentType
+                )
+            }
+        }.sortedBy { it.date }.toMutableList()
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/data/model/CourseDatesBannerInfo.kt b/core/src/main/java/org/openedx/core/data/model/CourseDatesBannerInfo.kt
new file mode 100644
index 000000000..09e2d39cb
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/model/CourseDatesBannerInfo.kt
@@ -0,0 +1,21 @@
+package org.openedx.core.data.model
+
+import com.google.gson.annotations.SerializedName
+import org.openedx.core.domain.model.CourseDatesBannerInfo
+
+data class CourseDatesBannerInfo(
+    @SerializedName("dates_banner_info")
+    val datesBannerInfo: DatesBannerInfo?,
+    @SerializedName("has_ended")
+    val hasEnded: Boolean?,
+) {
+    fun mapToDomain(): CourseDatesBannerInfo {
+        return CourseDatesBannerInfo(
+            missedDeadlines = datesBannerInfo?.missedDeadlines ?: false,
+            missedGatedContent = datesBannerInfo?.missedGatedContent ?: false,
+            verifiedUpgradeLink = datesBannerInfo?.verifiedUpgradeLink ?: "",
+            contentTypeGatingEnabled = datesBannerInfo?.contentTypeGatingEnabled ?: false,
+            hasEnded = hasEnded ?: false,
+        )
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/data/model/CourseEnrollments.kt b/core/src/main/java/org/openedx/core/data/model/CourseEnrollments.kt
new file mode 100644
index 000000000..1c10cfa92
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/model/CourseEnrollments.kt
@@ -0,0 +1,8 @@
+package org.openedx.core.data.model
+
+import com.google.gson.annotations.SerializedName
+
+data class CourseEnrollments(
+    @SerializedName("enrollments")
+    val enrollments: DashboardCourseList
+)
diff --git a/core/src/main/java/org/openedx/core/data/model/CourseStructureModel.kt b/core/src/main/java/org/openedx/core/data/model/CourseStructureModel.kt
index ac2552c26..9f22a14a0 100644
--- a/core/src/main/java/org/openedx/core/data/model/CourseStructureModel.kt
+++ b/core/src/main/java/org/openedx/core/data/model/CourseStructureModel.kt
@@ -41,7 +41,7 @@ data class CourseStructureModel(
         return CourseStructure(
             root = root,
             blockData = blockData.map {
-                it.value.mapToDomain()
+                it.value.mapToDomain(blockData)
             },
             id = id ?: "",
             name = name ?: "",
@@ -51,7 +51,7 @@ data class CourseStructureModel(
             startDisplay = startDisplay ?: "",
             startType = startType ?: "",
             end = TimeUtils.iso8601ToDate(end ?: ""),
-            coursewareAccess = coursewareAccess?.mapToDomain()!!,
+            coursewareAccess = coursewareAccess?.mapToDomain(),
             media = media?.mapToDomain(),
             certificate = certificate?.mapToDomain(),
             isSelfPaced = isSelfPaced ?: false
@@ -70,7 +70,7 @@ data class CourseStructureModel(
             startDisplay = startDisplay ?: "",
             startType = startType ?: "",
             end = end ?: "",
-            coursewareAccess = coursewareAccess?.mapToRoomEntity()!!,
+            coursewareAccess = coursewareAccess?.mapToRoomEntity(),
             media = MediaDb.createFrom(media),
             certificate = certificate?.mapToRoomEntity(),
             isSelfPaced = isSelfPaced ?: false
diff --git a/core/src/main/java/org/openedx/core/data/model/DateType.kt b/core/src/main/java/org/openedx/core/data/model/DateType.kt
new file mode 100644
index 000000000..8604286d7
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/model/DateType.kt
@@ -0,0 +1,32 @@
+package org.openedx.core.data.model
+
+import com.google.gson.annotations.SerializedName
+import org.openedx.core.R
+
+enum class DateType(val drawableResId: Int? = null) {
+    @SerializedName("todays-date")
+    TODAY_DATE(R.drawable.core_ic_calendar),
+
+    @SerializedName("course-start-date")
+    COURSE_START_DATE(R.drawable.core_ic_start_end),
+
+    @SerializedName("course-end-date")
+    COURSE_END_DATE(R.drawable.core_ic_start_end),
+
+    @SerializedName("course-expired-date")
+    COURSE_EXPIRED_DATE(R.drawable.core_ic_course_expire),
+
+    @SerializedName("assignment-due-date")
+    ASSIGNMENT_DUE_DATE(R.drawable.core_ic_assignment),
+
+    @SerializedName("certificate-available-date")
+    CERTIFICATE_AVAILABLE_DATE(R.drawable.core_ic_certificate),
+
+    @SerializedName("verified-upgrade-deadline")
+    VERIFIED_UPGRADE_DEADLINE(R.drawable.core_ic_calendar),
+
+    @SerializedName("verification-deadline-date")
+    VERIFICATION_DEADLINE_DATE(R.drawable.core_ic_calendar),
+
+    NONE,
+}
diff --git a/core/src/main/java/org/openedx/core/data/model/DatesBannerInfo.kt b/core/src/main/java/org/openedx/core/data/model/DatesBannerInfo.kt
new file mode 100644
index 000000000..639c5313b
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/model/DatesBannerInfo.kt
@@ -0,0 +1,14 @@
+package org.openedx.core.data.model
+
+import com.google.gson.annotations.SerializedName
+
+data class DatesBannerInfo(
+    @SerializedName("missed_deadlines")
+    val missedDeadlines: Boolean = false,
+    @SerializedName("missed_gated_content")
+    val missedGatedContent: Boolean = false,
+    @SerializedName("verified_upgrade_link")
+    val verifiedUpgradeLink: String? = "",
+    @SerializedName("content_type_gating_enabled")
+    val contentTypeGatingEnabled: Boolean = false,
+)
diff --git a/core/src/main/java/org/openedx/core/data/model/EnrolledCourseData.kt b/core/src/main/java/org/openedx/core/data/model/EnrolledCourseData.kt
index 74aba5073..4afc9ef71 100644
--- a/core/src/main/java/org/openedx/core/data/model/EnrolledCourseData.kt
+++ b/core/src/main/java/org/openedx/core/data/model/EnrolledCourseData.kt
@@ -61,7 +61,7 @@ data class EnrolledCourseData(
             end = TimeUtils.iso8601ToDate(end ?: ""),
             dynamicUpgradeDeadline = dynamicUpgradeDeadline ?: "",
             subscriptionId = subscriptionId ?: "",
-            coursewareAccess = coursewareAccess?.mapToDomain()!!,
+            coursewareAccess = coursewareAccess?.mapToDomain(),
             media = media?.mapToDomain(),
             courseImage = courseImage ?: "",
             courseAbout = courseAbout ?: "",
@@ -86,7 +86,7 @@ data class EnrolledCourseData(
             end = end ?: "",
             dynamicUpgradeDeadline = dynamicUpgradeDeadline ?: "",
             subscriptionId = subscriptionId ?: "",
-            coursewareAccess = coursewareAccess?.mapToRoomEntity()!!,
+            coursewareAccess = coursewareAccess?.mapToRoomEntity(),
             media = MediaDb.createFrom(media),
             courseImage = courseImage ?: "",
             courseAbout = courseAbout ?: "",
diff --git a/core/src/main/java/org/openedx/core/data/model/ResetCourseDates.kt b/core/src/main/java/org/openedx/core/data/model/ResetCourseDates.kt
new file mode 100644
index 000000000..5cf00b0d3
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/model/ResetCourseDates.kt
@@ -0,0 +1,27 @@
+package org.openedx.core.data.model
+
+import com.google.gson.annotations.SerializedName
+import org.openedx.core.domain.model.ResetCourseDates
+
+data class ResetCourseDates(
+    @SerializedName("message")
+    val message: String = "",
+    @SerializedName("body")
+    val body: String = "",
+    @SerializedName("header")
+    val header: String = "",
+    @SerializedName("link")
+    val link: String = "",
+    @SerializedName("link_text")
+    val linkText: String = "",
+) {
+    fun mapToDomain(): ResetCourseDates {
+        return ResetCourseDates(
+            message = message,
+            body = body,
+            header = header,
+            link = link,
+            linkText = linkText,
+        )
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/data/model/room/BlockDb.kt b/core/src/main/java/org/openedx/core/data/model/room/BlockDb.kt
index 26d83e81e..b1e9a53cf 100644
--- a/core/src/main/java/org/openedx/core/data/model/room/BlockDb.kt
+++ b/core/src/main/java/org/openedx/core/data/model/room/BlockDb.kt
@@ -31,9 +31,22 @@ data class BlockDb(
     @ColumnInfo("descendants")
     val descendants: List<String>,
     @ColumnInfo("completion")
-    val completion: Double
+    val completion: Double,
+    @ColumnInfo("contains_gated_content")
+    val containsGatedContent: Boolean
 ) {
-    fun mapToDomain(): Block {
+    fun mapToDomain(blocks: List<BlockDb>): Block {
+        val blockType = BlockType.getBlockType(type)
+        val descendantsType = if (blockType == BlockType.VERTICAL) {
+            val types = descendants.map { descendant ->
+                BlockType.getBlockType(blocks.find { it.id == descendant }?.type ?: "")
+            }
+            val sortedBlockTypes = BlockType.sortByPriority(types)
+            sortedBlockTypes.firstOrNull() ?: blockType
+        } else {
+            blockType
+        }
+
         return Block(
             id = id,
             blockId = blockId,
@@ -47,7 +60,9 @@ data class BlockDb(
             studentViewMultiDevice = studentViewMultiDevice,
             blockCounts = blockCounts.mapToDomain(),
             descendants = descendants,
+            descendantsType = descendantsType,
             completion = completion,
+            containsGatedContent = containsGatedContent
         )
     }
 
@@ -70,7 +85,8 @@ data class BlockDb(
                     studentViewData = StudentViewDataDb.createFrom(studentViewData),
                     studentViewMultiDevice = studentViewMultiDevice ?: false,
                     blockCounts = BlockCountsDb.createFrom(blockCounts),
-                    completion = completion ?: 0.0
+                    completion = completion ?: 0.0,
+                    containsGatedContent = containsGatedContent ?: false
                 )
             }
         }
diff --git a/core/src/main/java/org/openedx/core/data/model/room/CourseStructureEntity.kt b/core/src/main/java/org/openedx/core/data/model/room/CourseStructureEntity.kt
index 3c0ac045b..90352d821 100644
--- a/core/src/main/java/org/openedx/core/data/model/room/CourseStructureEntity.kt
+++ b/core/src/main/java/org/openedx/core/data/model/room/CourseStructureEntity.kt
@@ -33,7 +33,7 @@ data class CourseStructureEntity(
     @ColumnInfo("end")
     val end: String?,
     @Embedded
-    val coursewareAccess: CoursewareAccessDb,
+    val coursewareAccess: CoursewareAccessDb?,
     @Embedded
     val media: MediaDb?,
     @Embedded
@@ -45,7 +45,7 @@ data class CourseStructureEntity(
     fun mapToDomain(): CourseStructure {
         return CourseStructure(
             root,
-            blocks.map { it.mapToDomain() },
+            blocks.map { it.mapToDomain(blocks) },
             id,
             name,
             number,
@@ -54,7 +54,7 @@ data class CourseStructureEntity(
             startDisplay,
             startType,
             TimeUtils.iso8601ToDate(end ?: ""),
-            coursewareAccess.mapToDomain(),
+            coursewareAccess?.mapToDomain(),
             media?.mapToDomain(),
             certificate?.mapToDomain(),
             isSelfPaced
diff --git a/core/src/main/java/org/openedx/core/data/model/room/discovery/EnrolledCourseEntity.kt b/core/src/main/java/org/openedx/core/data/model/room/discovery/EnrolledCourseEntity.kt
index 31eaf463f..05aab3bdd 100644
--- a/core/src/main/java/org/openedx/core/data/model/room/discovery/EnrolledCourseEntity.kt
+++ b/core/src/main/java/org/openedx/core/data/model/room/discovery/EnrolledCourseEntity.kt
@@ -61,7 +61,7 @@ data class EnrolledCourseDataDb(
     @ColumnInfo("subscriptionId")
     val subscriptionId: String,
     @Embedded
-    val coursewareAccess: CoursewareAccessDb,
+    val coursewareAccess: CoursewareAccessDb?,
     @Embedded
     val media: MediaDb?,
     @ColumnInfo(name = "course_image_link")
@@ -93,7 +93,7 @@ data class EnrolledCourseDataDb(
             TimeUtils.iso8601ToDate(end),
             dynamicUpgradeDeadline,
             subscriptionId,
-            coursewareAccess.mapToDomain(),
+            coursewareAccess?.mapToDomain(),
             media?.mapToDomain(),
             courseImage,
             courseAbout,
diff --git a/core/src/main/java/org/openedx/core/data/storage/CorePreferences.kt b/core/src/main/java/org/openedx/core/data/storage/CorePreferences.kt
index a3eb44d06..11f21c661 100644
--- a/core/src/main/java/org/openedx/core/data/storage/CorePreferences.kt
+++ b/core/src/main/java/org/openedx/core/data/storage/CorePreferences.kt
@@ -1,13 +1,14 @@
 package org.openedx.core.data.storage
 
-import org.openedx.core.domain.model.User
+import org.openedx.core.data.model.User
 import org.openedx.core.domain.model.VideoSettings
 
 interface CorePreferences {
     var accessToken: String
     var refreshToken: String
+    var accessTokenExpiresAt: Long
     var user: User?
     var videoSettings: VideoSettings
 
     fun clear()
-}
\ No newline at end of file
+}
diff --git a/core/src/main/java/org/openedx/core/data/storage/InAppReviewPreferences.kt b/core/src/main/java/org/openedx/core/data/storage/InAppReviewPreferences.kt
new file mode 100644
index 000000000..c9bf0638c
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/data/storage/InAppReviewPreferences.kt
@@ -0,0 +1,28 @@
+package org.openedx.core.data.storage
+
+interface InAppReviewPreferences {
+    var lastReviewVersion: VersionName
+    var wasPositiveRated: Boolean
+
+    fun setVersion(version: String) {
+        lastReviewVersion = formatVersionName(version)
+    }
+
+    fun formatVersionName(version: String) = version
+            .split(".")
+            .let {
+                VersionName(
+                    majorVersion = it[0].toInt(),
+                    minorVersion = it[1].toInt()
+                )
+            }
+
+    data class VersionName(
+        var majorVersion: Int,
+        var minorVersion: Int
+    ) {
+        companion object {
+            val default = VersionName(Int.MIN_VALUE, Int.MIN_VALUE)
+        }
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/domain/model/AgreementUrls.kt b/core/src/main/java/org/openedx/core/domain/model/AgreementUrls.kt
new file mode 100644
index 000000000..a6d3e4e66
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/domain/model/AgreementUrls.kt
@@ -0,0 +1,25 @@
+package org.openedx.core.domain.model
+
+/**
+ * Data class with information about user agreements URLs
+ *
+ * @param agreementUrls Map with keys from SUPPORTED_LANGUAGES config
+ * @param defaultAgreementUrls AgreementUrls for default language ('en')
+ */
+internal data class Agreement(
+    private val agreementUrls: Map<String, AgreementUrls> = mapOf(),
+    private val defaultAgreementUrls: AgreementUrls
+) {
+    fun getAgreementForLocale(locale: String): AgreementUrls {
+        return agreementUrls.getOrDefault(locale, defaultAgreementUrls)
+    }
+}
+
+data class AgreementUrls(
+    val privacyPolicyUrl: String = "",
+    val cookiePolicyUrl: String = "",
+    val dataSellConsentUrl: String = "",
+    val tosUrl: String = "",
+    val eulaUrl: String = "",
+    val supportedLanguages: List<String> = emptyList(),
+)
diff --git a/core/src/main/java/org/openedx/core/domain/model/Block.kt b/core/src/main/java/org/openedx/core/domain/model/Block.kt
index 4e384ff5b..1c69142a8 100644
--- a/core/src/main/java/org/openedx/core/domain/model/Block.kt
+++ b/core/src/main/java/org/openedx/core/domain/model/Block.kt
@@ -22,7 +22,9 @@ data class Block(
     val studentViewMultiDevice: Boolean,
     val blockCounts: BlockCounts,
     val descendants: List<String>,
+    val descendantsType: BlockType,
     val completion: Double,
+    val containsGatedContent: Boolean = false,
     val downloadModel: DownloadModel? = null
 ) {
     val isDownloadable: Boolean
@@ -35,6 +37,7 @@ data class Block(
             BlockType.VIDEO -> {
                 FileType.VIDEO
             }
+
             else -> {
                 FileType.UNKNOWN
             }
@@ -47,6 +50,40 @@ data class Block(
 
     fun isDownloaded() = downloadModel?.downloadedState == DownloadedState.DOWNLOADED
 
+    fun isGated() = containsGatedContent
+
+    fun isCompleted() = completion == 1.0
+
+    fun getFirstDescendantBlock(blocks: List<Block>): Block? {
+        if (blocks.isEmpty()) return null
+        descendants.forEach { descendant ->
+            blocks.find { it.id == descendant }?.let { descendantBlock ->
+                return descendantBlock
+            }
+        }
+        return null
+    }
+
+    fun getDownloadsCount(blocks: List<Block>): Int {
+        if (blocks.isEmpty()) return 0
+        var count = 0
+        descendants.forEach { id ->
+            blocks.find { it.id == id }?.let { descendantBlock ->
+                count += blocks.filter { descendantBlock.descendants.contains(it.id) && it.isDownloadable }.size
+            }
+        }
+        return count
+    }
+
+    val isVideoBlock get() = type == BlockType.VIDEO
+    val isDiscussionBlock get() = type == BlockType.DISCUSSION
+    val isHTMLBlock get() = type == BlockType.HTML
+    val isProblemBlock get() = type == BlockType.PROBLEM
+    val isOpenAssessmentBlock get() = type == BlockType.OPENASSESSMENT
+    val isDragAndDropBlock get() = type == BlockType.DRAG_AND_DROP_V2
+    val isWordCloudBlock get() = type == BlockType.WORD_CLOUD
+    val isLTIConsumerBlock get() = type == BlockType.LTI_CONSUMER
+    val isSurveyBlock get() = type == BlockType.SURVEY
 }
 
 data class StudentViewData(
@@ -54,7 +91,7 @@ data class StudentViewData(
     val duration: Any,
     val transcripts: HashMap<String, String>?,
     val encodedVideos: EncodedVideos?,
-    val topicId: String
+    val topicId: String,
 )
 
 data class EncodedVideos(
@@ -63,7 +100,7 @@ data class EncodedVideos(
     var fallback: VideoInfo?,
     var desktopMp4: VideoInfo?,
     var mobileHigh: VideoInfo?,
-    var mobileLow: VideoInfo?
+    var mobileLow: VideoInfo?,
 ) {
     val hasDownloadableVideo: Boolean
         get() = isPreferredVideoInfo(hls) ||
@@ -72,6 +109,21 @@ data class EncodedVideos(
                 isPreferredVideoInfo(mobileHigh) ||
                 isPreferredVideoInfo(mobileLow)
 
+    val hasNonYoutubeVideo: Boolean
+        get() = mobileHigh?.url != null
+                || mobileLow?.url != null
+                || desktopMp4?.url != null
+                || hls?.url != null
+                || fallback?.url != null
+
+    val videoUrl: String
+        get() = mobileHigh?.url
+            ?: mobileLow?.url
+            ?: desktopMp4?.url
+            ?: hls?.url
+            ?: fallback?.url
+            ?: ""
+
     fun getPreferredVideoInfoForDownloading(preferredVideoQuality: VideoQuality): VideoInfo? {
         var preferredVideoInfo = when (preferredVideoQuality) {
             VideoQuality.OPTION_360P -> mobileLow
@@ -125,9 +177,9 @@ data class EncodedVideos(
 
 data class VideoInfo(
     val url: String,
-    val fileSize: Int
+    val fileSize: Int,
 )
 
 data class BlockCounts(
-    val video: Int
+    val video: Int,
 )
diff --git a/core/src/main/java/org/openedx/core/domain/model/CourseDateBlock.kt b/core/src/main/java/org/openedx/core/domain/model/CourseDateBlock.kt
new file mode 100644
index 000000000..7e91c59fa
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/domain/model/CourseDateBlock.kt
@@ -0,0 +1,32 @@
+package org.openedx.core.domain.model
+
+import org.openedx.core.data.model.DateType
+import org.openedx.core.utils.isTimeLessThan24Hours
+import org.openedx.core.utils.isToday
+import java.util.Date
+
+data class CourseDateBlock(
+    val title: String = "",
+    val description: String = "",
+    val link: String = "",
+    val blockId: String = "",
+    val learnerHasAccess: Boolean = false,
+    val complete: Boolean = false,
+    val date: Date,
+    val dateType: DateType = DateType.NONE,
+    val assignmentType: String? = "",
+) {
+    fun isCompleted(): Boolean {
+        return complete || (dateType in setOf(
+            DateType.COURSE_START_DATE,
+            DateType.COURSE_END_DATE,
+            DateType.CERTIFICATE_AVAILABLE_DATE,
+            DateType.VERIFIED_UPGRADE_DEADLINE,
+            DateType.VERIFICATION_DEADLINE_DATE,
+        ) && date.before(Date()))
+    }
+
+    fun isTimeDifferenceLessThan24Hours(): Boolean {
+        return (date.isToday() && date.before(Date())) || date.isTimeLessThan24Hours()
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/domain/model/CourseDatesBannerInfo.kt b/core/src/main/java/org/openedx/core/domain/model/CourseDatesBannerInfo.kt
new file mode 100644
index 000000000..3281ca045
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/domain/model/CourseDatesBannerInfo.kt
@@ -0,0 +1,65 @@
+package org.openedx.core.domain.model
+
+import org.openedx.core.R
+import org.openedx.core.domain.model.CourseBannerType.BLANK
+import org.openedx.core.domain.model.CourseBannerType.INFO_BANNER
+import org.openedx.core.domain.model.CourseBannerType.RESET_DATES
+import org.openedx.core.domain.model.CourseBannerType.UPGRADE_TO_GRADED
+import org.openedx.core.domain.model.CourseBannerType.UPGRADE_TO_RESET
+
+data class CourseDatesBannerInfo(
+    private val missedDeadlines: Boolean,
+    private val missedGatedContent: Boolean,
+    private val verifiedUpgradeLink: String,
+    private val contentTypeGatingEnabled: Boolean,
+    private val hasEnded: Boolean,
+) {
+    val bannerType by lazy { getCourseBannerType() }
+
+    fun isBannerAvailableForUserType(isSelfPaced: Boolean): Boolean {
+        if (hasEnded) return false
+
+        val selfPacedAvailable = isSelfPaced && bannerType != BLANK
+        val instructorPacedAvailable = !isSelfPaced && bannerType == UPGRADE_TO_GRADED
+
+        return selfPacedAvailable || instructorPacedAvailable
+    }
+
+    fun isBannerAvailableForDashboard(): Boolean {
+        return hasEnded.not() && bannerType == RESET_DATES
+    }
+
+    private fun getCourseBannerType(): CourseBannerType = when {
+        canUpgradeToGraded() -> UPGRADE_TO_GRADED
+        canUpgradeToReset() -> UPGRADE_TO_RESET
+        canResetDates() -> RESET_DATES
+        infoBanner() -> INFO_BANNER
+        else -> BLANK
+    }
+
+    private fun infoBanner(): Boolean = !missedDeadlines
+
+    private fun canUpgradeToGraded(): Boolean = contentTypeGatingEnabled && !missedDeadlines
+
+    private fun canUpgradeToReset(): Boolean =
+        !canUpgradeToGraded() && missedDeadlines && missedGatedContent
+
+    private fun canResetDates(): Boolean =
+        !canUpgradeToGraded() && missedDeadlines && !missedGatedContent
+}
+
+enum class CourseBannerType(
+    val headerResId: Int = 0,
+    val bodyResId: Int = 0,
+    val buttonResId: Int = 0
+) {
+    BLANK,
+    INFO_BANNER(bodyResId = R.string.core_dates_info_banner_body),
+    UPGRADE_TO_GRADED(bodyResId = R.string.core_dates_upgrade_to_graded_banner_body),
+    UPGRADE_TO_RESET(bodyResId = R.string.core_dates_upgrade_to_reset_banner_body),
+    RESET_DATES(
+        headerResId = R.string.core_dates_reset_dates_banner_header,
+        bodyResId = R.string.core_dates_reset_dates_banner_body,
+        buttonResId = R.string.core_dates_reset_dates_banner_button
+    );
+}
diff --git a/core/src/main/java/org/openedx/core/domain/model/CourseDatesResult.kt b/core/src/main/java/org/openedx/core/domain/model/CourseDatesResult.kt
new file mode 100644
index 000000000..2431bc7db
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/domain/model/CourseDatesResult.kt
@@ -0,0 +1,6 @@
+package org.openedx.core.domain.model
+
+data class CourseDatesResult(
+    val datesSection: LinkedHashMap<DatesSection, List<CourseDateBlock>>,
+    val courseBanner: CourseDatesBannerInfo,
+)
diff --git a/core/src/main/java/org/openedx/core/domain/model/CourseStructure.kt b/core/src/main/java/org/openedx/core/domain/model/CourseStructure.kt
index 8ac5b6e41..bdb3820de 100644
--- a/core/src/main/java/org/openedx/core/domain/model/CourseStructure.kt
+++ b/core/src/main/java/org/openedx/core/domain/model/CourseStructure.kt
@@ -1,6 +1,6 @@
 package org.openedx.core.domain.model
 
-import java.util.*
+import java.util.Date
 
 data class CourseStructure(
     val root: String,
@@ -13,8 +13,8 @@ data class CourseStructure(
     val startDisplay: String,
     val startType: String,
     val end: Date?,
-    val coursewareAccess: CoursewareAccess,
+    val coursewareAccess: CoursewareAccess?,
     val media: Media?,
     val certificate: Certificate?,
     val isSelfPaced: Boolean
-)
\ No newline at end of file
+)
diff --git a/core/src/main/java/org/openedx/core/domain/model/DatesSection.kt b/core/src/main/java/org/openedx/core/domain/model/DatesSection.kt
new file mode 100644
index 000000000..111d6e65e
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/domain/model/DatesSection.kt
@@ -0,0 +1,13 @@
+package org.openedx.core.domain.model
+
+import org.openedx.core.R
+
+enum class DatesSection(val stringResId: Int) {
+    COMPLETED(R.string.core_date_type_completed),
+    PAST_DUE(R.string.core_date_type_past_due),
+    TODAY(R.string.core_date_type_today),
+    THIS_WEEK(R.string.core_date_type_this_week),
+    NEXT_WEEK(R.string.core_date_type_next_week),
+    UPCOMING(R.string.core_date_type_upcoming),
+    NONE(R.string.core_date_type_none);
+}
diff --git a/core/src/main/java/org/openedx/core/domain/model/EnrolledCourseData.kt b/core/src/main/java/org/openedx/core/domain/model/EnrolledCourseData.kt
index f5bb23d41..2a66cccde 100644
--- a/core/src/main/java/org/openedx/core/domain/model/EnrolledCourseData.kt
+++ b/core/src/main/java/org/openedx/core/domain/model/EnrolledCourseData.kt
@@ -16,7 +16,7 @@ data class EnrolledCourseData(
     val end: Date?,
     val dynamicUpgradeDeadline: String,
     val subscriptionId: String,
-    val coursewareAccess: CoursewareAccess,
+    val coursewareAccess: CoursewareAccess?,
     val media: Media?,
     val courseImage: String,
     val courseAbout: String,
diff --git a/core/src/main/java/org/openedx/core/domain/model/ResetCourseDates.kt b/core/src/main/java/org/openedx/core/domain/model/ResetCourseDates.kt
new file mode 100644
index 000000000..60eab790c
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/domain/model/ResetCourseDates.kt
@@ -0,0 +1,9 @@
+package org.openedx.core.domain.model
+
+data class ResetCourseDates(
+    val message: String,
+    val body: String,
+    val header: String,
+    val link: String,
+    val linkText: String,
+)
diff --git a/core/src/main/java/org/openedx/core/domain/model/VideoSettings.kt b/core/src/main/java/org/openedx/core/domain/model/VideoSettings.kt
index 9e2b84ddb..07241824b 100644
--- a/core/src/main/java/org/openedx/core/domain/model/VideoSettings.kt
+++ b/core/src/main/java/org/openedx/core/domain/model/VideoSettings.kt
@@ -11,11 +11,11 @@ data class VideoSettings(
     }
 }
 
-enum class VideoQuality(val titleResId: Int) {
-    AUTO(R.string.auto_recommended_text),
-    OPTION_360P(R.string.video_quality_p360),
-    OPTION_540P(R.string.video_quality_p540),
-    OPTION_720P(R.string.video_quality_p720);
+enum class VideoQuality(val titleResId: Int, val width: Int, val height: Int) {
+    AUTO(R.string.auto_recommended_text, 0, 0),
+    OPTION_360P(R.string.video_quality_p360, 640, 360),
+    OPTION_540P(R.string.video_quality_p540, 960, 540),
+    OPTION_720P(R.string.video_quality_p720, 1280, 720);
 
     val value: String = this.name.replace("OPTION_", "").lowercase()
 }
diff --git a/core/src/main/java/org/openedx/core/extension/AssetExt.kt b/core/src/main/java/org/openedx/core/extension/AssetExt.kt
new file mode 100644
index 000000000..190f68721
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/extension/AssetExt.kt
@@ -0,0 +1,15 @@
+package org.openedx.core.extension
+
+import android.content.res.AssetManager
+import android.util.Log
+import java.io.BufferedReader
+
+fun AssetManager.readAsText(fileName: String): String? {
+    return try {
+        open(fileName).bufferedReader().use(BufferedReader::readText)
+    } catch (e: Exception) {
+        Log.e("AssetExt", "Unable to load file $fileName from assets")
+        e.printStackTrace()
+        null
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/extension/ContinuationExt.kt b/core/src/main/java/org/openedx/core/extension/ContinuationExt.kt
new file mode 100644
index 000000000..8de4ec05b
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/extension/ContinuationExt.kt
@@ -0,0 +1,12 @@
+package org.openedx.core.extension
+
+import kotlinx.coroutines.CancellableContinuation
+import kotlin.coroutines.resume
+
+inline fun <T> CancellableContinuation<T>.safeResume(value: T, onExceptionCalled: () -> Unit) {
+    if (isActive) {
+        resume(value)
+    } else {
+        onExceptionCalled()
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/extension/IntExt.kt b/core/src/main/java/org/openedx/core/extension/IntExt.kt
new file mode 100644
index 000000000..5739007f5
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/extension/IntExt.kt
@@ -0,0 +1,5 @@
+package org.openedx.core.extension
+
+fun Int.nonZero(): Int? {
+    return if (this != 0) this else null
+}
diff --git a/core/src/main/java/org/openedx/core/extension/ListExt.kt b/core/src/main/java/org/openedx/core/extension/ListExt.kt
index 2831f917a..1c2a242f7 100644
--- a/core/src/main/java/org/openedx/core/extension/ListExt.kt
+++ b/core/src/main/java/org/openedx/core/extension/ListExt.kt
@@ -1,5 +1,8 @@
 package org.openedx.core.extension
 
+import org.openedx.core.BlockType
+import org.openedx.core.domain.model.Block
+
 inline fun <T> List<T>.indexOfFirstFromIndex(startIndex: Int, predicate: (T) -> Boolean): Int {
     var index = 0
     for ((i, item) in this.withIndex()) {
@@ -23,3 +26,17 @@ fun <T> MutableList<T>.clearAndAddAll(collection: Collection<T>): MutableList<T>
     this.addAll(collection)
     return this
 }
+
+fun List<Block>.getVerticalBlocks(): List<Block> {
+    return this.filter { it.type == BlockType.VERTICAL }
+}
+
+fun List<Block>.getSequentialBlocks(): List<Block> {
+    return this.filter { it.type == BlockType.SEQUENTIAL }
+}
+
+fun <T> List<T>?.isNotEmptyThenLet(block: (List<T>) -> Unit) {
+    if (!isNullOrEmpty()) {
+        block(this)
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/extension/TextConverter.kt b/core/src/main/java/org/openedx/core/extension/TextConverter.kt
index 3c7f04676..6899c1bad 100644
--- a/core/src/main/java/org/openedx/core/extension/TextConverter.kt
+++ b/core/src/main/java/org/openedx/core/extension/TextConverter.kt
@@ -2,13 +2,17 @@ package org.openedx.core.extension
 
 import android.os.Parcelable
 import android.util.Patterns
-import org.openedx.core.BuildConfig
 import kotlinx.parcelize.Parcelize
 import org.jsoup.Jsoup
 import org.jsoup.nodes.Document
 import org.jsoup.select.Elements
+import org.koin.core.component.KoinComponent
+import org.koin.core.component.inject
+import org.openedx.core.config.Config
 
-object TextConverter {
+object TextConverter : KoinComponent {
+
+    private val config by inject<Config>()
 
     fun htmlTextToLinkedText(html: String): LinkedText {
         val doc: Document =
@@ -22,8 +26,8 @@ object TextConverter {
             } else {
                 link.attr("href")
             }
-            if (resultLink.isNotEmpty() && isLinkValid(org.openedx.core.BuildConfig.BASE_URL + resultLink)) {
-                linksMap[link.text()] = org.openedx.core.BuildConfig.BASE_URL + resultLink
+            if (resultLink.isNotEmpty() && isLinkValid(config.getApiHostURL() + resultLink)) {
+                linksMap[link.text()] = config.getApiHostURL() + resultLink
             }
         }
         return LinkedText(text, linksMap.toMap())
@@ -47,8 +51,8 @@ object TextConverter {
                     } else {
                         link.attr("href")
                     }
-                if (resultLink.isNotEmpty() && isLinkValid(org.openedx.core.BuildConfig.BASE_URL + resultLink)) {
-                    linksMap[link.text()] = org.openedx.core.BuildConfig.BASE_URL + resultLink
+                if (resultLink.isNotEmpty() && isLinkValid(config.getApiHostURL() + resultLink)) {
+                    linksMap[link.text()] = config.getApiHostURL() + resultLink
                 }
             }
         }
diff --git a/core/src/main/java/org/openedx/core/extension/UriExt.kt b/core/src/main/java/org/openedx/core/extension/UriExt.kt
new file mode 100644
index 000000000..cfa1b44d5
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/extension/UriExt.kt
@@ -0,0 +1,15 @@
+package org.openedx.core.extension
+
+import android.net.Uri
+
+fun Uri.getQueryParams(): Map<String, String> {
+    val paramsMap = mutableMapOf<String, String>()
+
+    queryParameterNames.forEach { name ->
+        getQueryParameter(name)?.let { value ->
+            paramsMap[name] = value
+        }
+    }
+
+    return paramsMap
+}
diff --git a/core/src/main/java/org/openedx/core/extension/ViewExt.kt b/core/src/main/java/org/openedx/core/extension/ViewExt.kt
index 4fb9bad85..ff2e95d47 100644
--- a/core/src/main/java/org/openedx/core/extension/ViewExt.kt
+++ b/core/src/main/java/org/openedx/core/extension/ViewExt.kt
@@ -1,8 +1,13 @@
 package org.openedx.core.extension
 
 import android.content.Context
+import android.content.res.Resources
+import android.graphics.Rect
 import android.util.DisplayMetrics
 import android.view.View
+import android.view.ViewGroup
+import android.widget.Toast
+import androidx.fragment.app.DialogFragment
 
 fun Context.dpToPixel(dp: Int): Float {
     return dp * (resources.displayMetrics.densityDpi.toFloat() / DisplayMetrics.DENSITY_DEFAULT)
@@ -28,5 +33,16 @@ fun View.requestApplyInsetsWhenAttached() {
             override fun onViewDetachedFromWindow(v: View) = Unit
         })
     }
+}
+
+fun DialogFragment.setWidthPercent(percentage: Int) {
+    val percent = percentage.toFloat() / 100
+    val dm = Resources.getSystem().displayMetrics
+    val rect = dm.run { Rect(0, 0, widthPixels, heightPixels) }
+    val percentWidth = rect.width() * percent
+    dialog?.window?.setLayout(percentWidth.toInt(), ViewGroup.LayoutParams.WRAP_CONTENT)
+}
 
-}
\ No newline at end of file
+fun Context.toastMessage(message: String) {
+    Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
+}
diff --git a/core/src/main/java/org/openedx/core/interfaces/EnrollInCourseInteractor.kt b/core/src/main/java/org/openedx/core/interfaces/EnrollInCourseInteractor.kt
new file mode 100644
index 000000000..5c82de1f5
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/interfaces/EnrollInCourseInteractor.kt
@@ -0,0 +1,5 @@
+package org.openedx.core.interfaces
+
+interface EnrollInCourseInteractor {
+    suspend fun enrollInACourse(id: String)
+}
diff --git a/core/src/main/java/org/openedx/core/module/DownloadWorker.kt b/core/src/main/java/org/openedx/core/module/DownloadWorker.kt
index e7a63db38..551d5b823 100644
--- a/core/src/main/java/org/openedx/core/module/DownloadWorker.kt
+++ b/core/src/main/java/org/openedx/core/module/DownloadWorker.kt
@@ -3,12 +3,15 @@ package org.openedx.core.module
 import android.app.NotificationChannel
 import android.app.NotificationManager
 import android.content.Context
+import android.content.pm.ServiceInfo
 import android.os.Build
 import androidx.annotation.RequiresApi
 import androidx.core.app.NotificationCompat
 import androidx.work.CoroutineWorker
 import androidx.work.ForegroundInfo
 import androidx.work.WorkerParameters
+import kotlinx.coroutines.flow.first
+import org.koin.java.KoinJavaComponent.inject
 import org.openedx.core.R
 import org.openedx.core.module.db.DownloadDao
 import org.openedx.core.module.db.DownloadModel
@@ -16,9 +19,6 @@ import org.openedx.core.module.db.DownloadModelEntity
 import org.openedx.core.module.db.DownloadedState
 import org.openedx.core.module.download.CurrentProgress
 import org.openedx.core.module.download.FileDownloader
-import kotlinx.coroutines.*
-import kotlinx.coroutines.flow.first
-import org.koin.java.KoinJavaComponent.inject
 import java.io.File
 
 class DownloadWorker(
@@ -60,15 +60,20 @@ class DownloadWorker(
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
             createChannel()
         }
+        val serviceType =
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q)
+                ServiceInfo.FOREGROUND_SERVICE_TYPE_DATA_SYNC else 0
+
         return ForegroundInfo(
             NOTIFICATION_ID,
             notificationBuilder
-                .setSmallIcon(R.drawable.core_ic_check)
+                .setSmallIcon(R.drawable.core_ic_check_in_box)
                 .setProgress(100, 0, false)
                 .setPriority(NotificationManager.IMPORTANCE_LOW)
                 .setContentText(context.getString(R.string.core_downloading_in_progress))
                 .setContentTitle("")
-                .build()
+                .build(),
+            serviceType
         )
     }
 
@@ -80,7 +85,7 @@ class DownloadWorker(
                         notificationManager.notify(
                             NOTIFICATION_ID,
                             notificationBuilder
-                                .setSmallIcon(R.drawable.core_ic_check)
+                                .setSmallIcon(R.drawable.core_ic_check_in_box)
                                 .setProgress(100, value.toInt(), false)
                                 .setPriority(NotificationManager.IMPORTANCE_LOW)
                                 .setContentText(context.getString(R.string.core_downloading_in_progress))
diff --git a/core/src/main/java/org/openedx/core/module/download/AbstractDownloader.kt b/core/src/main/java/org/openedx/core/module/download/AbstractDownloader.kt
index 08f6b2704..40144325e 100644
--- a/core/src/main/java/org/openedx/core/module/download/AbstractDownloader.kt
+++ b/core/src/main/java/org/openedx/core/module/download/AbstractDownloader.kt
@@ -3,18 +3,23 @@ package org.openedx.core.module.download
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
 import okhttp3.OkHttpClient
+import org.koin.core.component.KoinComponent
+import org.koin.core.component.inject
+import org.openedx.core.config.Config
 import retrofit2.Retrofit
 import java.io.File
 import java.io.FileOutputStream
 import java.io.InputStream
 
-abstract class AbstractDownloader {
+abstract class AbstractDownloader : KoinComponent {
+
+    private val config by inject<Config>()
 
     protected abstract val client: OkHttpClient
 
     private val downloadApi: DownloadApi by lazy {
         Retrofit.Builder()
-            .baseUrl(org.openedx.core.BuildConfig.BASE_URL)
+            .baseUrl(config.getApiHostURL())
             .client(client)
             .build()
             .create(DownloadApi::class.java)
diff --git a/core/src/main/java/org/openedx/core/presentation/catalog/CatalogWebView.kt b/core/src/main/java/org/openedx/core/presentation/catalog/CatalogWebView.kt
new file mode 100644
index 000000000..021185ca3
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/catalog/CatalogWebView.kt
@@ -0,0 +1,99 @@
+package org.openedx.core.presentation.catalog
+
+import android.annotation.SuppressLint
+import android.webkit.WebResourceRequest
+import android.webkit.WebView
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalContext
+import org.openedx.core.system.DefaultWebViewClient
+import org.openedx.core.presentation.catalog.WebViewLink.Authority as linkAuthority
+
+@SuppressLint("SetJavaScriptEnabled", "ComposableNaming")
+@Composable
+fun CatalogWebViewScreen(
+    url: String,
+    uriScheme: String,
+    isAllLinksExternal: Boolean = false,
+    onWebPageLoaded: () -> Unit,
+    refreshSessionCookie: () -> Unit = {},
+    onWebPageUpdated: (String) -> Unit = {},
+    onUriClick: (String, linkAuthority) -> Unit,
+): WebView {
+    val context = LocalContext.current
+
+    return remember {
+        WebView(context).apply {
+            webViewClient = object : DefaultWebViewClient(
+                context = context,
+                webView = this@apply,
+                isAllLinksExternal = isAllLinksExternal,
+                onUriClick = onUriClick,
+                refreshSessionCookie = refreshSessionCookie,
+            ) {
+                override fun onPageFinished(view: WebView?, url: String?) {
+                    super.onPageFinished(view, url)
+                    url?.let { onWebPageUpdated(it) }
+                }
+
+                override fun onPageCommitVisible(view: WebView?, url: String?) {
+                    super.onPageCommitVisible(view, url)
+                    onWebPageLoaded()
+                }
+
+                override fun shouldOverrideUrlLoading(
+                    view: WebView?,
+                    request: WebResourceRequest?
+                ): Boolean {
+                    val clickUrl = request?.url?.toString() ?: ""
+                    if (handleRecognizedLink(clickUrl)) {
+                        return true
+                    }
+
+                    return super.shouldOverrideUrlLoading(view, request)
+                }
+
+                private fun handleRecognizedLink(clickUrl: String): Boolean {
+                    val link = WebViewLink.parse(clickUrl, uriScheme) ?: return false
+
+                    return when (link.authority) {
+                        linkAuthority.COURSE_INFO,
+                        linkAuthority.PROGRAM_INFO,
+                        linkAuthority.ENROLLED_PROGRAM_INFO -> {
+                            val pathId = link.params[WebViewLink.Param.PATH_ID] ?: ""
+                            onUriClick(pathId, link.authority)
+                            true
+                        }
+
+                        linkAuthority.ENROLL,
+                        linkAuthority.ENROLLED_COURSE_INFO -> {
+                            val courseId = link.params[WebViewLink.Param.COURSE_ID] ?: ""
+                            onUriClick(courseId, link.authority)
+                            true
+                        }
+
+                        linkAuthority.COURSE -> {
+                            onUriClick("", link.authority)
+                            true
+                        }
+
+                        else -> false
+                    }
+                }
+            }
+
+            with(settings) {
+                javaScriptEnabled = true
+                loadWithOverviewMode = true
+                builtInZoomControls = false
+                setSupportZoom(true)
+                loadsImagesAutomatically = true
+                domStorageEnabled = true
+            }
+            isVerticalScrollBarEnabled = false
+            isHorizontalScrollBarEnabled = false
+
+            loadUrl(url)
+        }
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/presentation/catalog/WebViewLink.kt b/core/src/main/java/org/openedx/core/presentation/catalog/WebViewLink.kt
new file mode 100644
index 000000000..f066a3ae8
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/catalog/WebViewLink.kt
@@ -0,0 +1,52 @@
+package org.openedx.core.presentation.catalog
+
+import android.net.Uri
+import org.openedx.core.extension.getQueryParams
+
+/**
+ * To parse and store links that we need within a WebView.
+ */
+class WebViewLink(
+    var authority: Authority,
+    var params: Map<String, String>
+) {
+    enum class Authority(val key: String) {
+        COURSE_INFO("course_info"),
+        PROGRAM_INFO("program_info"),
+        ENROLL("enroll"),
+        ENROLLED_PROGRAM_INFO("enrolled_program_info"),
+        ENROLLED_COURSE_INFO("enrolled_course_info"),
+        COURSE("course"),
+        EXTERNAL("external"),
+    }
+
+    object Param {
+        const val PATH_ID = "path_id"
+        const val COURSE_ID = "course_id"
+        const val EMAIL_OPT = "email_opt_in"
+        const val PROGRAMS = "programs"
+    }
+
+    companion object {
+        fun parse(uriStr: String?, uriScheme: String): WebViewLink? {
+            if (uriStr.isNullOrEmpty()) {
+                return null
+            }
+            val sanitizedUriStr = uriStr.replace("+", "%2B")
+            val uri = Uri.parse(sanitizedUriStr)
+
+            // Validate the URI scheme
+            if (uriScheme != uri.scheme) {
+                return null
+            }
+
+            // Validate the Uri authority
+            val uriAuthority = Authority.values().find { it.key == uri.authority } ?: return null
+
+            // Parse the Uri params
+            val params = uri.getQueryParams()
+
+            return WebViewLink(uriAuthority, params)
+        }
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/alert/ActionDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/alert/ActionDialogFragment.kt
new file mode 100644
index 000000000..e502a136c
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/alert/ActionDialogFragment.kt
@@ -0,0 +1,155 @@
+package org.openedx.core.presentation.dialog.alert
+
+import android.content.res.Configuration
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+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.widthIn
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
+import androidx.fragment.app.DialogFragment
+import org.koin.android.ext.android.inject
+import org.openedx.core.R
+import org.openedx.core.config.Config
+import org.openedx.core.presentation.global.app_upgrade.DefaultTextButton
+import org.openedx.core.presentation.global.app_upgrade.TransparentTextButton
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.utils.UrlUtils
+
+class ActionDialogFragment : DialogFragment() {
+
+    private val config by inject<Config>()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                ActionDialog(
+                    title = requireArguments().getString(ARG_TITLE, ""),
+                    message = requireArguments().getString(ARG_MESSAGE, ""),
+                    onPositiveClick = {
+                        dismiss()
+                    },
+                    onNegativeClick = {
+                        UrlUtils.openInBrowser(
+                            activity = context,
+                            apiHostUrl = config.getApiHostURL(),
+                            url = requireArguments().getString(ARG_URL, ""),
+                        )
+                        dismiss()
+                    }
+                )
+            }
+        }
+    }
+
+    companion object {
+        private const val ARG_TITLE = "title"
+        private const val ARG_MESSAGE = "message"
+        private const val ARG_URL = "url"
+
+        fun newInstance(
+            title: String,
+            message: String,
+            url: String,
+        ): ActionDialogFragment {
+            val fragment = ActionDialogFragment()
+            fragment.arguments = bundleOf(
+                ARG_TITLE to title,
+                ARG_MESSAGE to message,
+                ARG_URL to url,
+            )
+            return fragment
+        }
+    }
+}
+
+@Composable
+private fun ActionDialog(
+    title: String,
+    message: String,
+    onPositiveClick: () -> Unit,
+    onNegativeClick: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .widthIn(max = 640.dp)
+            .fillMaxWidth()
+            .clip(MaterialTheme.appShapes.cardShape)
+            .background(
+                color = MaterialTheme.appColors.background,
+                shape = MaterialTheme.appShapes.cardShape
+            )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(32.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(20.dp)
+        ) {
+            Text(
+                text = title,
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleMedium
+            )
+            Text(
+                text = message,
+                color = MaterialTheme.appColors.textPrimary,
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.appTypography.bodyMedium
+            )
+            Row {
+                TransparentTextButton(
+                    text = stringResource(R.string.core_cancel),
+                    onClick = onPositiveClick
+                )
+                DefaultTextButton(
+                    text = stringResource(R.string.core_continue),
+                    onClick = onNegativeClick
+                )
+            }
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun ActionDialogPreview() {
+    ActionDialog(
+        title = "Leaving the app",
+        message = "You are now leaving the app and opening a browser.",
+        onPositiveClick = {},
+        onNegativeClick = {},
+    )
+}
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/alert/InfoDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/alert/InfoDialogFragment.kt
new file mode 100644
index 000000000..bc41d936d
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/alert/InfoDialogFragment.kt
@@ -0,0 +1,127 @@
+package org.openedx.core.presentation.dialog.alert
+
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
+import androidx.fragment.app.DialogFragment
+import org.openedx.core.R
+import org.openedx.core.presentation.global.app_upgrade.DefaultTextButton
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+
+class InfoDialogFragment : DialogFragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                InfoDialog(
+                    title = requireArguments().getString(ARG_TITLE, ""),
+                    message = requireArguments().getString(ARG_MESSAGE, ""),
+                    onClick = {
+                        dismiss()
+                    },
+                )
+            }
+        }
+    }
+
+    companion object {
+        private const val ARG_TITLE = "title"
+        private const val ARG_MESSAGE = "message"
+
+        fun newInstance(
+            title: String,
+            message: String,
+        ): InfoDialogFragment {
+            val fragment = InfoDialogFragment()
+            fragment.arguments = bundleOf(
+                ARG_TITLE to title,
+                ARG_MESSAGE to message,
+            )
+            return fragment
+        }
+    }
+}
+
+@Composable
+private fun InfoDialog(
+    title: String,
+    message: String,
+    onClick: () -> Unit,
+) {
+    Box(
+        modifier = Modifier
+            .widthIn(max = 640.dp)
+            .fillMaxWidth()
+            .clip(MaterialTheme.appShapes.cardShape)
+            .background(
+                color = MaterialTheme.appColors.background,
+                shape = MaterialTheme.appShapes.cardShape
+            )
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(32.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(20.dp)
+        ) {
+            Text(
+                text = title,
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleMedium
+            )
+            Text(
+                text = message,
+                color = MaterialTheme.appColors.textPrimary,
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.appTypography.bodyMedium
+            )
+            DefaultTextButton(
+                text = stringResource(R.string.core_ok),
+                onClick = onClick
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SimpleDialogPreview() {
+    InfoDialog(
+        title = "Important Notice",
+        message = "This is an important announcement.",
+        onClick = {}
+    )
+}
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewManager.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewManager.kt
new file mode 100644
index 000000000..c825a8e9b
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewManager.kt
@@ -0,0 +1,33 @@
+package org.openedx.core.presentation.dialog.appreview
+
+import androidx.appcompat.app.AppCompatActivity
+import org.openedx.core.data.storage.InAppReviewPreferences
+import org.openedx.core.presentation.global.AppData
+
+class AppReviewManager(
+    private val activity: AppCompatActivity,
+    private val reviewPreferences: InAppReviewPreferences,
+    private val appData: AppData
+) {
+    var isDialogShowed = false
+
+    fun tryToOpenRateDialog() {
+        val supportFragmentManager = activity.supportFragmentManager
+        if (!supportFragmentManager.isDestroyed) {
+            isDialogShowed = true
+            val currentVersionName = reviewPreferences.formatVersionName(appData.versionName)
+            // Check is app wasn't positive rated AND 2 minor OR 1 major app versions passed since the last review
+            if (
+                !reviewPreferences.wasPositiveRated
+                && (currentVersionName.minorVersion - 2 >= reviewPreferences.lastReviewVersion.minorVersion
+                || currentVersionName.majorVersion - 1 >= reviewPreferences.lastReviewVersion.majorVersion)
+            ) {
+                val dialog = RateDialogFragment.newInstance()
+                dialog.show(
+                    supportFragmentManager,
+                    RateDialogFragment::class.simpleName
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewUI.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewUI.kt
new file mode 100644
index 000000000..e2d6a471f
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/AppReviewUI.kt
@@ -0,0 +1,464 @@
+package org.openedx.core.presentation.dialog.appreview
+
+import android.content.res.Configuration.ORIENTATION_LANDSCAPE
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.TextFieldDefaults
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Star
+import androidx.compose.material.icons.outlined.StarOutline
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableIntState
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+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.input.pointer.pointerInput
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.layout.positionInRoot
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.openedx.core.R
+import org.openedx.core.ui.noRippleClickable
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+import kotlin.math.round
+
+@Composable
+fun ThankYouDialog(
+    modifier: Modifier = Modifier,
+    description: String,
+    showButtons: Boolean,
+    onNotNowClick: () -> Unit,
+    onRateUsClick: () -> Unit
+) {
+    val orientation = LocalConfiguration.current.orientation
+    val imageModifier = if (orientation == ORIENTATION_LANDSCAPE) {
+        Modifier.size(40.dp)
+    } else {
+        Modifier
+    }
+
+    DefaultDialogBox(
+        modifier = modifier,
+        onDismissClock = onNotNowClick
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 32.dp, vertical = 46.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(28.dp)
+        ) {
+            Image(
+                modifier = imageModifier,
+                painter = painterResource(id = R.drawable.core_ic_heart),
+                contentScale = ContentScale.FillBounds,
+                contentDescription = null
+            )
+            Text(
+                text = stringResource(R.string.core_thank_you),
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleMedium
+            )
+            Text(
+                text = description,
+                color = MaterialTheme.appColors.textPrimary,
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.appTypography.bodyMedium
+            )
+
+            if (showButtons) {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(24.dp)
+                ) {
+                    TransparentTextButton(
+                        text = stringResource(id = R.string.core_not_now),
+                        onClick = onNotNowClick
+                    )
+                    DefaultTextButton(
+                        text = stringResource(id = R.string.core_rate_us),
+                        onClick = onRateUsClick
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun FeedbackDialog(
+    modifier: Modifier = Modifier,
+    feedback: MutableState<String>,
+    onNotNowClick: () -> Unit,
+    onShareClick: () -> Unit
+) {
+    val orientation = LocalConfiguration.current.orientation
+    val textFieldModifier = if (orientation == ORIENTATION_LANDSCAPE) {
+        Modifier.height(80.dp)
+    } else {
+        Modifier.height(162.dp)
+    }
+
+    DefaultDialogBox(
+        modifier = modifier,
+        onDismissClock = onNotNowClick
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(32.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(20.dp)
+        ) {
+            Text(
+                text = stringResource(R.string.core_feedback_dialog_title),
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleMedium
+            )
+            Text(
+                text = stringResource(id = R.string.core_feedback_dialog_description),
+                color = MaterialTheme.appColors.textPrimary,
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.appTypography.bodyMedium
+            )
+
+            OutlinedTextField(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .then(textFieldModifier),
+                value = feedback.value,
+                onValueChange = { str ->
+                    feedback.value = str
+                },
+                textStyle = MaterialTheme.appTypography.labelLarge,
+                shape = MaterialTheme.appShapes.buttonShape,
+                placeholder = {
+                    Text(
+                        text = stringResource(id = R.string.core_feedback_dialog_textfield_hint),
+                        color = MaterialTheme.appColors.textFieldHint,
+                        style = MaterialTheme.appTypography.labelLarge,
+                    )
+                },
+                colors = TextFieldDefaults.outlinedTextFieldColors(
+                    backgroundColor = MaterialTheme.appColors.cardViewBackground,
+                    unfocusedBorderColor = MaterialTheme.appColors.textFieldBorder,
+                    textColor = MaterialTheme.appColors.textFieldText
+                ),
+            )
+
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(24.dp)
+            ) {
+                TransparentTextButton(
+                    text = stringResource(id = R.string.core_not_now),
+                    onClick = onNotNowClick
+                )
+                DefaultTextButton(
+                    isEnabled = feedback.value.isNotEmpty(),
+                    text = stringResource(id = R.string.core_share_feedback),
+                    onClick = onShareClick
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun RateDialog(
+    modifier: Modifier = Modifier,
+    rating: MutableIntState,
+    onNotNowClick: () -> Unit,
+    onSubmitClick: () -> Unit
+) {
+    DefaultDialogBox(
+        modifier = modifier,
+        onDismissClock = onNotNowClick
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(32.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(20.dp)
+        ) {
+            Text(
+                text = stringResource(R.string.core_rate_dialog_title, stringResource(R.string.app_name)),
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleMedium
+            )
+            Text(
+                text = stringResource(id = R.string.core_rate_dialog_description),
+                color = MaterialTheme.appColors.textPrimary,
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.appTypography.bodyMedium
+            )
+            RatingBar(
+                modifier = Modifier
+                    .padding(vertical = 12.dp),
+                rating = rating
+            )
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(24.dp)
+            ) {
+                TransparentTextButton(
+                    text = stringResource(id = R.string.core_not_now),
+                    onClick = onNotNowClick
+                )
+                DefaultTextButton(
+                    isEnabled = rating.intValue > 0,
+                    text = stringResource(id = R.string.core_submit),
+                    onClick = onSubmitClick
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun DefaultDialogBox(
+    modifier: Modifier = Modifier,
+    onDismissClock: () -> Unit,
+    content: @Composable (BoxScope.() -> Unit)
+) {
+    Surface(
+        modifier = modifier,
+        color = Color.Transparent
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(horizontal = 4.dp)
+                .noRippleClickable {
+                    onDismissClock()
+                },
+            contentAlignment = Alignment.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .widthIn(max = 640.dp)
+                    .fillMaxWidth()
+                    .clip(MaterialTheme.appShapes.cardShape)
+                    .noRippleClickable {}
+                    .background(
+                        color = MaterialTheme.appColors.background,
+                        shape = MaterialTheme.appShapes.cardShape
+                    )
+            ) {
+                content.invoke(this)
+            }
+        }
+    }
+}
+
+@Composable
+fun TransparentTextButton(
+    text: String,
+    onClick: () -> Unit
+) {
+    Button(
+        modifier = Modifier
+            .height(42.dp),
+        colors = ButtonDefaults.buttonColors(
+            backgroundColor = Color.Transparent
+        ),
+        elevation = null,
+        shape = MaterialTheme.appShapes.navigationButtonShape,
+        onClick = onClick
+    ) {
+        Text(
+            color = MaterialTheme.appColors.textAccent,
+            style = MaterialTheme.appTypography.labelLarge,
+            text = text
+        )
+    }
+}
+
+@Composable
+fun DefaultTextButton(
+    isEnabled: Boolean = true,
+    text: String,
+    onClick: () -> Unit
+) {
+    val textColor: Color
+    val backgroundColor: Color
+    if (isEnabled) {
+        textColor = MaterialTheme.appColors.buttonText
+        backgroundColor = MaterialTheme.appColors.buttonBackground
+    } else {
+        textColor = MaterialTheme.appColors.inactiveButtonText
+        backgroundColor = MaterialTheme.appColors.inactiveButtonBackground
+    }
+
+    Button(
+        modifier = Modifier
+            .height(42.dp),
+        colors = ButtonDefaults.buttonColors(
+            backgroundColor = backgroundColor,
+            contentColor = textColor
+        ),
+        elevation = null,
+        shape = MaterialTheme.appShapes.navigationButtonShape,
+        enabled = isEnabled,
+        onClick = onClick
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            Text(
+                text = text,
+                style = MaterialTheme.appTypography.labelLarge
+            )
+        }
+    }
+}
+
+@Composable
+fun RatingBar(
+    modifier: Modifier = Modifier,
+    rating: MutableIntState,
+    stars: Int = 5,
+    starsColor: Color = MaterialTheme.appColors.rateStars,
+) {
+    val density = LocalDensity.current
+    var componentWight by remember { mutableStateOf(0.dp) }
+    var maxXValue by remember { mutableFloatStateOf(0f) }
+    val startSize = componentWight / stars
+    val filledStars = rating.intValue
+    val unfilledStars = stars - rating.intValue
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .onGloballyPositioned { coordinates ->
+                maxXValue = coordinates.size.width + coordinates.positionInRoot().x
+                componentWight = with(density) {
+                    coordinates.size.width.toDp()
+                }
+            }
+            .pointerInput(Unit) {
+                detectTapGestures { offset ->
+                    rating.intValue = round(offset.x / maxXValue * stars + 0.8f).toInt()
+                }
+            },
+        horizontalArrangement = Arrangement.Center
+    ) {
+        repeat(filledStars) {
+            Icon(
+                modifier = Modifier.size(startSize),
+                imageVector = Icons.Outlined.Star,
+                contentDescription = null,
+                tint = starsColor
+            )
+        }
+        repeat(unfilledStars) {
+            Icon(
+                modifier = Modifier.size(startSize),
+                imageVector = Icons.Outlined.StarOutline,
+                contentDescription = null,
+                tint = if (isSystemInDarkTheme()) Color.White else Color.Black
+            )
+        }
+    }
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Composable
+fun RatingBarPreview() {
+    OpenEdXTheme {
+        RatingBar(
+            rating = remember { mutableIntStateOf(2) }
+        )
+    }
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun RateDialogPreview() {
+    OpenEdXTheme {
+        RateDialog(
+            rating = remember { mutableIntStateOf(2) },
+            onNotNowClick = {},
+            onSubmitClick = {}
+        )
+    }
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun FeedbackDialogPreview() {
+    OpenEdXTheme {
+        FeedbackDialog(
+            feedback = remember { mutableStateOf("Feedback") },
+            onNotNowClick = {},
+            onShareClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun ThankYouDialogWithButtonsPreview() {
+    OpenEdXTheme {
+        ThankYouDialog(
+            description = "Description",
+            showButtons = true,
+            onNotNowClick = {},
+            onRateUsClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun ThankYouDialogWithoutButtonsPreview() {
+    OpenEdXTheme {
+        ThankYouDialog(
+            description = "Description",
+            showButtons = false,
+            onNotNowClick = {},
+            onRateUsClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appreview/BaseAppReviewDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/BaseAppReviewDialogFragment.kt
new file mode 100644
index 000000000..427c71959
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/BaseAppReviewDialogFragment.kt
@@ -0,0 +1,26 @@
+package org.openedx.core.presentation.dialog.appreview
+
+import androidx.fragment.app.DialogFragment
+import org.koin.android.ext.android.inject
+import org.openedx.core.data.storage.InAppReviewPreferences
+import org.openedx.core.presentation.global.AppData
+
+open class BaseAppReviewDialogFragment : DialogFragment() {
+
+    private val reviewPreferences: InAppReviewPreferences by inject()
+    protected val appData: AppData by inject()
+
+    fun saveVersionName() {
+        val versionName = appData.versionName
+        reviewPreferences.setVersion(versionName)
+    }
+
+    fun onPositiveRate() {
+        reviewPreferences.wasPositiveRated = true
+    }
+
+    fun notNowClick() {
+        saveVersionName()
+        dismiss()
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appreview/FeedbackDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/FeedbackDialogFragment.kt
new file mode 100644
index 000000000..f882cbe8a
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/FeedbackDialogFragment.kt
@@ -0,0 +1,83 @@
+package org.openedx.core.presentation.dialog.appreview
+
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import org.koin.android.ext.android.inject
+import org.openedx.core.config.Config
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.utils.EmailUtil
+
+class FeedbackDialogFragment : BaseAppReviewDialogFragment() {
+
+    private val config by inject<Config>()
+    private var wasShareClicked = false
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        if (dialog != null && dialog!!.window != null) {
+            dialog!!.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+        }
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val feedback = rememberSaveable { mutableStateOf("") }
+                FeedbackDialog(
+                    feedback = feedback,
+                    onNotNowClick = this@FeedbackDialogFragment::notNowClick,
+                    onShareClick = {
+                        onShareClick(feedback.value)
+                    }
+                )
+            }
+        }
+    }
+
+    override fun onResume() {
+        super.onResume()
+        if (wasShareClicked) {
+            openThankYouDialog()
+            dismiss()
+        }
+    }
+
+    private fun onShareClick(feedback: String) {
+        saveVersionName()
+        wasShareClicked = true
+        sendEmail(feedback)
+    }
+
+    private fun sendEmail(feedback: String) {
+        EmailUtil.showFeedbackScreen(
+            context = requireContext(),
+            feedbackEmailAddress = config.getFeedbackEmailAddress(),
+            feedback = feedback,
+            appVersion = appData.versionName
+        )
+    }
+
+    private fun openThankYouDialog() {
+        val dialog = ThankYouDialogFragment.newInstance(
+            isFeedbackPositive = false
+        )
+        dialog.show(
+            requireActivity().supportFragmentManager,
+            ThankYouDialogFragment::class.simpleName
+        )
+    }
+
+    companion object {
+        fun newInstance(): FeedbackDialogFragment {
+            return FeedbackDialogFragment()
+        }
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appreview/RateDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/RateDialogFragment.kt
new file mode 100644
index 000000000..1cfa034b9
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/RateDialogFragment.kt
@@ -0,0 +1,70 @@
+package org.openedx.core.presentation.dialog.appreview
+
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import org.openedx.core.ui.theme.OpenEdXTheme
+
+class RateDialogFragment: BaseAppReviewDialogFragment() {
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        if (dialog != null && dialog!!.window != null) {
+            dialog!!.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+        }
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val rating = rememberSaveable { mutableIntStateOf(0) }
+                RateDialog(
+                    rating = rating,
+                    onNotNowClick = this@RateDialogFragment::notNowClick,
+                    onSubmitClick = {
+                        onSubmitClick(rating.intValue)
+                    }
+                )
+            }
+        }
+    }
+
+    private fun onSubmitClick(rating: Int) {
+        dismiss()
+        if (rating > 3) {
+            openThankYouDialog()
+        } else {
+            openFeedbackDialog()
+        }
+    }
+
+    private fun openFeedbackDialog() {
+        val dialog = FeedbackDialogFragment.newInstance()
+        dialog.show(
+            requireActivity().supportFragmentManager,
+            FeedbackDialogFragment::class.simpleName
+        )
+    }
+
+    private fun openThankYouDialog() {
+        val dialog = ThankYouDialogFragment.newInstance(
+            isFeedbackPositive = true
+        )
+        dialog.show(
+            requireActivity().supportFragmentManager,
+            ThankYouDialogFragment::class.simpleName
+        )
+    }
+
+    companion object {
+        fun newInstance(): RateDialogFragment {
+            return RateDialogFragment()
+        }
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appreview/ThankYouDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/ThankYouDialogFragment.kt
new file mode 100644
index 000000000..89fe98c1c
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/appreview/ThankYouDialogFragment.kt
@@ -0,0 +1,100 @@
+package org.openedx.core.presentation.dialog.appreview
+
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.core.os.bundleOf
+import androidx.lifecycle.lifecycleScope
+import com.google.android.play.core.review.ReviewException
+import com.google.android.play.core.review.ReviewManager
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.launch
+import org.koin.android.ext.android.inject
+import org.openedx.core.R
+import org.openedx.core.ui.theme.OpenEdXTheme
+
+class ThankYouDialogFragment : BaseAppReviewDialogFragment() {
+
+    private val reviewManager: ReviewManager by inject()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        if (dialog != null && dialog!!.window != null) {
+            dialog!!.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+        }
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val isFeedbackPositive = rememberSaveable {
+                    mutableStateOf(requireArguments().getBoolean(ARG_IS_FEEDBACK_POSITIVE))
+                }
+                val description = if (isFeedbackPositive.value) {
+                    stringResource(id = R.string.core_thank_you_dialog_positive_description)
+                } else {
+                    stringResource(id = R.string.core_thank_you_dialog_negative_description)
+                }
+
+                ThankYouDialog(
+                    description = description,
+                    showButtons = isFeedbackPositive.value,
+                    onNotNowClick = this@ThankYouDialogFragment::notNowClick,
+                    onRateUsClick = this@ThankYouDialogFragment::openInAppReview
+                )
+
+                closeDialogDelay(isFeedbackPositive.value)
+            }
+        }
+    }
+
+    private fun closeDialogDelay(isFeedbackPositive: Boolean) {
+        if (!isFeedbackPositive) {
+            lifecycleScope.launch {
+                delay(3000)
+                dismiss()
+            }
+        }
+    }
+
+    private fun openInAppReview() {
+        val request = reviewManager.requestReviewFlow()
+        request.addOnCompleteListener { task ->
+            try {
+                if (request.isSuccessful) {
+                    val reviewInfo = task.result
+                    val flow = reviewManager.launchReviewFlow(requireActivity(), reviewInfo)
+                    flow.addOnCompleteListener { _ ->
+                        onPositiveRate()
+                    }
+                    dismiss()
+                }
+            } catch (e: ReviewException) {
+                e.printStackTrace()
+            }
+        }
+    }
+
+    companion object {
+
+        private const val ARG_IS_FEEDBACK_POSITIVE = "is_feedback_positive"
+
+        fun newInstance(
+            isFeedbackPositive: Boolean
+        ): ThankYouDialogFragment {
+            val fragment = ThankYouDialogFragment()
+            fragment.arguments = bundleOf(
+                ARG_IS_FEEDBACK_POSITIVE to isFeedbackPositive
+            )
+            return fragment
+        }
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/appupgrade/AppUpgradeDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/appupgrade/AppUpgradeDialogFragment.kt
new file mode 100644
index 000000000..4c5c4ce56
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/appupgrade/AppUpgradeDialogFragment.kt
@@ -0,0 +1,52 @@
+package org.openedx.core.presentation.dialog.appupgrade
+
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.fragment.app.DialogFragment
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRecommendDialog
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.AppUpdateState
+
+class AppUpgradeDialogFragment : DialogFragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        if (dialog != null && dialog!!.window != null) {
+            dialog!!.window?.setBackgroundDrawable(ColorDrawable(android.graphics.Color.TRANSPARENT))
+        }
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                AppUpgradeRecommendDialog(
+                    onNotNowClick = this@AppUpgradeDialogFragment::onNotNowClick,
+                    onUpdateClick = this@AppUpgradeDialogFragment::onUpdateClick
+                )
+            }
+        }
+    }
+
+    private fun onNotNowClick() {
+        AppUpdateState.wasUpdateDialogClosed.value = true
+        dismiss()
+    }
+
+    private fun onUpdateClick() {
+        AppUpdateState.wasUpdateDialogClosed.value = true
+        dismiss()
+        AppUpdateState.openPlayMarket(requireContext())
+    }
+
+    companion object {
+        fun newInstance(): AppUpgradeDialogFragment {
+            return AppUpgradeDialogFragment()
+        }
+    }
+
+}
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/SelectBottomDialogFragment.kt b/core/src/main/java/org/openedx/core/presentation/dialog/selectorbottomsheet/SelectBottomDialogFragment.kt
similarity index 98%
rename from core/src/main/java/org/openedx/core/presentation/dialog/SelectBottomDialogFragment.kt
rename to core/src/main/java/org/openedx/core/presentation/dialog/selectorbottomsheet/SelectBottomDialogFragment.kt
index 8d15d6973..e2b6bdd58 100644
--- a/core/src/main/java/org/openedx/core/presentation/dialog/SelectBottomDialogFragment.kt
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/selectorbottomsheet/SelectBottomDialogFragment.kt
@@ -1,4 +1,4 @@
-package org.openedx.core.presentation.dialog
+package org.openedx.core.presentation.dialog.selectorbottomsheet
 
 import android.graphics.Color
 import android.graphics.drawable.ColorDrawable
@@ -29,16 +29,15 @@ import androidx.fragment.app.DialogFragment
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import com.google.android.material.bottomsheet.BottomSheetDialogFragment
+import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.core.R
 import org.openedx.core.domain.model.RegistrationField
 import org.openedx.core.extension.parcelableArrayList
 import org.openedx.core.ui.SheetContent
-import org.openedx.core.ui.rememberWindowSize
-import org.openedx.core.ui.theme.OpenEdXTheme
-import org.openedx.core.ui.theme.appColors
-import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.core.ui.isImeVisibleState
 import org.openedx.core.ui.noRippleClickable
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
 
 class SelectBottomDialogFragment : BottomSheetDialogFragment() {
diff --git a/core/src/main/java/org/openedx/core/presentation/dialog/SelectDialogViewModel.kt b/core/src/main/java/org/openedx/core/presentation/dialog/selectorbottomsheet/SelectDialogViewModel.kt
similarity index 90%
rename from core/src/main/java/org/openedx/core/presentation/dialog/SelectDialogViewModel.kt
rename to core/src/main/java/org/openedx/core/presentation/dialog/selectorbottomsheet/SelectDialogViewModel.kt
index 07a2f1b74..6a09f5724 100644
--- a/core/src/main/java/org/openedx/core/presentation/dialog/SelectDialogViewModel.kt
+++ b/core/src/main/java/org/openedx/core/presentation/dialog/selectorbottomsheet/SelectDialogViewModel.kt
@@ -1,4 +1,4 @@
-package org.openedx.core.presentation.dialog
+package org.openedx.core.presentation.dialog.selectorbottomsheet
 
 import androidx.lifecycle.viewModelScope
 import org.openedx.core.BaseViewModel
diff --git a/core/src/main/java/org/openedx/core/presentation/global/AppData.kt b/core/src/main/java/org/openedx/core/presentation/global/AppData.kt
new file mode 100644
index 000000000..324d3325a
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/global/AppData.kt
@@ -0,0 +1,5 @@
+package org.openedx.core.presentation.global
+
+data class AppData(
+    val versionName: String,
+)
diff --git a/core/src/main/java/org/openedx/core/presentation/global/AppDataHolder.kt b/core/src/main/java/org/openedx/core/presentation/global/AppDataHolder.kt
deleted file mode 100644
index d10024135..000000000
--- a/core/src/main/java/org/openedx/core/presentation/global/AppDataHolder.kt
+++ /dev/null
@@ -1,9 +0,0 @@
-package org.openedx.core.presentation.global
-
-interface AppDataHolder {
-    val appData: AppData
-}
-
-data class AppData(
-    val versionName: String
-)
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/global/InsetHolder.kt b/core/src/main/java/org/openedx/core/presentation/global/InsetHolder.kt
index 8dd5551de..26996f162 100644
--- a/core/src/main/java/org/openedx/core/presentation/global/InsetHolder.kt
+++ b/core/src/main/java/org/openedx/core/presentation/global/InsetHolder.kt
@@ -4,4 +4,5 @@ package org.openedx.core.presentation.global
 interface InsetHolder {
     val topInset: Int
     val bottomInset: Int
+    val cutoutInset: Int
 }
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/global/WhatsNewGlobalManager.kt b/core/src/main/java/org/openedx/core/presentation/global/WhatsNewGlobalManager.kt
new file mode 100644
index 000000000..e2cf46a4e
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/global/WhatsNewGlobalManager.kt
@@ -0,0 +1,5 @@
+package org.openedx.core.presentation.global
+
+interface WhatsNewGlobalManager {
+    fun shouldShowWhatsNew(): Boolean
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpdateUI.kt b/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpdateUI.kt
new file mode 100644
index 000000000..cfa53da7c
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpdateUI.kt
@@ -0,0 +1,383 @@
+package org.openedx.core.presentation.global.app_upgrade
+
+import android.content.res.Configuration.ORIENTATION_LANDSCAPE
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Card
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.material.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.platform.LocalConfiguration
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.openedx.core.R
+import org.openedx.core.ui.noRippleClickable
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+
+@Composable
+fun AppUpgradeRequiredScreen(
+    modifier: Modifier = Modifier,
+    onUpdateClick: () -> Unit
+) {
+    AppUpgradeRequiredScreen(
+        modifier = modifier,
+        showAccountSettingsButton = false,
+        onAccountSettingsClick = {},
+        onUpdateClick = onUpdateClick
+    )
+}
+
+@Composable
+fun AppUpgradeRequiredScreen(
+    modifier: Modifier = Modifier,
+    showAccountSettingsButton: Boolean,
+    onAccountSettingsClick: () -> Unit,
+    onUpdateClick: () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(color = MaterialTheme.appColors.background)
+            .statusBarsInset(),
+        contentAlignment = Alignment.TopCenter
+    ) {
+        Text(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 10.dp, bottom = 12.dp),
+            text = stringResource(id = R.string.core_deprecated_app_version),
+            color = MaterialTheme.appColors.textPrimary,
+            style = MaterialTheme.appTypography.titleMedium,
+            textAlign = TextAlign.Center
+        )
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            AppUpgradeRequiredContent(
+                modifier = Modifier.padding(horizontal = 32.dp),
+                showAccountSettingsButton = showAccountSettingsButton,
+                onAccountSettingsClick = onAccountSettingsClick,
+                onUpdateClick = onUpdateClick
+            )
+        }
+    }
+}
+
+@Composable
+fun AppUpgradeRecommendDialog(
+    modifier: Modifier = Modifier,
+    onNotNowClick: () -> Unit,
+    onUpdateClick: () -> Unit
+) {
+    val orientation = LocalConfiguration.current.orientation
+    val imageModifier = if (orientation == ORIENTATION_LANDSCAPE) {
+        Modifier.size(60.dp)
+    } else {
+        Modifier
+    }
+
+    Surface(
+        modifier = modifier,
+        color = Color.Transparent
+    ) {
+        Box(
+            modifier = modifier
+                .fillMaxSize()
+                .padding(horizontal = 4.dp)
+                .noRippleClickable {
+                    onNotNowClick()
+                },
+            contentAlignment = Alignment.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .widthIn(max = 640.dp)
+                    .fillMaxWidth()
+                    .clip(MaterialTheme.appShapes.cardShape)
+                    .noRippleClickable {}
+                    .background(
+                        color = MaterialTheme.appColors.background,
+                        shape = MaterialTheme.appShapes.cardShape
+                    )
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(32.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.spacedBy(20.dp)
+                ) {
+                    Image(
+                        modifier = imageModifier,
+                        painter = painterResource(id = R.drawable.core_ic_icon_upgrade),
+                        contentDescription = null
+                    )
+                    Text(
+                        text = stringResource(id = R.string.core_app_upgrade_title),
+                        color = MaterialTheme.appColors.textPrimary,
+                        style = MaterialTheme.appTypography.titleMedium
+                    )
+                    Text(
+                        text = stringResource(id = R.string.core_app_upgrade_dialog_description),
+                        color = MaterialTheme.appColors.textPrimary,
+                        textAlign = TextAlign.Center,
+                        style = MaterialTheme.appTypography.bodyMedium
+                    )
+                    AppUpgradeDialogButtons(
+                        onNotNowClick = onNotNowClick,
+                        onUpdateClick = onUpdateClick
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun AppUpgradeRequiredContent(
+    modifier: Modifier = Modifier,
+    showAccountSettingsButton: Boolean,
+    onAccountSettingsClick: () -> Unit,
+    onUpdateClick: () -> Unit
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(32.dp)
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.core_ic_warning),
+            contentDescription = null
+        )
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Text(
+                text = stringResource(id = R.string.core_app_update_required_title),
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleMedium
+            )
+            Text(
+                text = stringResource(id = R.string.core_app_update_required_description),
+                color = MaterialTheme.appColors.textPrimary,
+                textAlign = TextAlign.Center,
+                style = MaterialTheme.appTypography.bodyMedium
+            )
+        }
+        AppUpgradeRequiredButtons(
+            showAccountSettingsButton = showAccountSettingsButton,
+            onAccountSettingsClick = onAccountSettingsClick,
+            onUpdateClick = onUpdateClick
+        )
+    }
+}
+
+@Composable
+fun AppUpgradeRequiredButtons(
+    showAccountSettingsButton: Boolean,
+    onAccountSettingsClick: () -> Unit,
+    onUpdateClick: () -> Unit
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(24.dp)
+    ) {
+        if (showAccountSettingsButton) {
+            TransparentTextButton(
+                text = stringResource(id = R.string.core_account_settings),
+                onClick = onAccountSettingsClick
+            )
+        }
+        DefaultTextButton(
+            text = stringResource(id = R.string.core_update),
+            onClick = onUpdateClick
+        )
+    }
+}
+
+@Composable
+fun AppUpgradeDialogButtons(
+    onNotNowClick: () -> Unit,
+    onUpdateClick: () -> Unit
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(24.dp)
+    ) {
+        TransparentTextButton(
+            text = stringResource(id = R.string.core_not_now),
+            onClick = onNotNowClick
+        )
+        DefaultTextButton(
+            text = stringResource(id = R.string.core_update),
+            onClick = onUpdateClick
+        )
+    }
+}
+
+@Composable
+fun TransparentTextButton(
+    text: String,
+    onClick: () -> Unit
+) {
+    Button(
+        modifier = Modifier
+            .height(42.dp),
+        colors = ButtonDefaults.buttonColors(
+            backgroundColor = Color.Transparent
+        ),
+        elevation = null,
+        shape = MaterialTheme.appShapes.navigationButtonShape,
+        onClick = onClick
+    ) {
+        Text(
+            color = MaterialTheme.appColors.textAccent,
+            style = MaterialTheme.appTypography.labelLarge,
+            text = text
+        )
+    }
+}
+
+@Composable
+fun DefaultTextButton(
+    text: String,
+    onClick: () -> Unit
+) {
+    Button(
+        modifier = Modifier
+            .height(42.dp),
+        colors = ButtonDefaults.buttonColors(
+            backgroundColor = MaterialTheme.appColors.buttonBackground
+        ),
+        elevation = null,
+        shape = MaterialTheme.appShapes.navigationButtonShape,
+        onClick = onClick
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            Text(
+                text = text,
+                color = MaterialTheme.appColors.buttonText,
+                style = MaterialTheme.appTypography.labelLarge
+            )
+        }
+    }
+}
+
+@Composable
+fun AppUpgradeRecommendedBox(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit
+) {
+    Card(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(20.dp)
+            .clickable {
+                onClick()
+            },
+        shape = MaterialTheme.appShapes.cardShape,
+        backgroundColor = MaterialTheme.appColors.primary
+    ) {
+        Row(
+            modifier = Modifier.padding(horizontal = 20.dp, vertical = 8.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Icon(
+                modifier = Modifier.size(40.dp),
+                painter = painterResource(id = R.drawable.core_ic_icon_upgrade),
+                contentDescription = null,
+                tint = Color.White
+            )
+            Column {
+                Text(
+                    text = stringResource(id = R.string.core_app_upgrade_title),
+                    color = Color.White,
+                    style = MaterialTheme.appTypography.titleMedium
+                )
+                Text(
+                    text = stringResource(id = R.string.core_app_upgrade_box_description),
+                    color = Color.White,
+                    style = MaterialTheme.appTypography.bodyMedium
+                )
+            }
+        }
+    }
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun AppUpgradeRequiredScreenPreview() {
+    OpenEdXTheme {
+        AppUpgradeRequiredScreen(
+            showAccountSettingsButton = true,
+            onAccountSettingsClick = {},
+            onUpdateClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AppUpgradeRecommendedBoxPreview() {
+    OpenEdXTheme {
+        AppUpgradeRecommendedBox(
+            onClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AppUpgradeDialogButtonsPreview() {
+    OpenEdXTheme {
+        AppUpgradeDialogButtons(
+            onNotNowClick = {},
+            onUpdateClick = {}
+        )
+    }
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun AppUpgradeRecommendDialogPreview() {
+    OpenEdXTheme {
+        AppUpgradeRecommendDialog(
+            onNotNowClick = {},
+            onUpdateClick = {}
+        )
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpgradeRouter.kt b/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpgradeRouter.kt
new file mode 100644
index 000000000..482c91093
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/AppUpgradeRouter.kt
@@ -0,0 +1,7 @@
+package org.openedx.core.presentation.global.app_upgrade
+
+import androidx.fragment.app.FragmentManager
+
+interface AppUpgradeRouter {
+    fun navigateToUserProfile(fm: FragmentManager)
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/UpgradeRequiredFragment.kt b/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/UpgradeRequiredFragment.kt
new file mode 100644
index 000000000..da8685435
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/global/app_upgrade/UpgradeRequiredFragment.kt
@@ -0,0 +1,42 @@
+package org.openedx.core.presentation.global.app_upgrade
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.setFragmentResult
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.AppUpdateState
+
+class UpgradeRequiredFragment : Fragment() {
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                AppUpgradeRequiredScreen(
+                    showAccountSettingsButton = true,
+                    onAccountSettingsClick = {
+                        setFragmentResult(REQUEST_KEY, bundleOf(OPEN_ACCOUNT_SETTINGS_KEY to ""))
+                        parentFragmentManager.popBackStack()
+                    },
+                    onUpdateClick = {
+                        AppUpdateState.openPlayMarket(requireContext())
+                    }
+                )
+            }
+        }
+    }
+
+    companion object {
+        const val REQUEST_KEY = "UpgradeRequiredFragmentRequestKey"
+        const val OPEN_ACCOUNT_SETTINGS_KEY = "openAccountSettings"
+    }
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/presentation/global/webview/WebContentFragment.kt b/core/src/main/java/org/openedx/core/presentation/global/webview/WebContentFragment.kt
new file mode 100644
index 000000000..b1a496743
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/presentation/global/webview/WebContentFragment.kt
@@ -0,0 +1,60 @@
+package org.openedx.core.presentation.global.webview
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import android.webkit.CookieManager
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.openedx.core.config.Config
+import org.openedx.core.ui.WebContentScreen
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.theme.OpenEdXTheme
+
+class WebContentFragment : Fragment() {
+
+    private val config: Config by inject()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val windowSize = rememberWindowSize()
+                WebContentScreen(
+                    apiHostUrl = config.getApiHostURL(),
+                    windowSize = windowSize,
+                    title = requireArguments().getString(ARG_TITLE, ""),
+                    contentUrl = requireArguments().getString(ARG_URL, ""),
+                    onBackClick = {
+                        requireActivity().supportFragmentManager.popBackStack()
+                    })
+            }
+        }
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        CookieManager.getInstance().flush()
+    }
+
+    companion object {
+        private const val ARG_TITLE = "argTitle"
+        private const val ARG_URL = "argUrl"
+
+        fun newInstance(title: String, url: String): WebContentFragment {
+            val fragment = WebContentFragment()
+            fragment.arguments = bundleOf(
+                ARG_TITLE to title,
+                ARG_URL to url,
+            )
+            return fragment
+        }
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/system/AppCookieManager.kt b/core/src/main/java/org/openedx/core/system/AppCookieManager.kt
index 40f4ec015..f09e16362 100644
--- a/core/src/main/java/org/openedx/core/system/AppCookieManager.kt
+++ b/core/src/main/java/org/openedx/core/system/AppCookieManager.kt
@@ -1,16 +1,16 @@
 package org.openedx.core.system
 
 import android.webkit.CookieManager
-import org.openedx.core.BuildConfig
-import org.openedx.core.data.api.CookiesApi
 import okhttp3.Cookie
 import okhttp3.RequestBody
+import org.openedx.core.config.Config
+import org.openedx.core.data.api.CookiesApi
 import retrofit2.Response
 import java.util.concurrent.TimeUnit
 
-class AppCookieManager(private val api: CookiesApi) {
+class AppCookieManager(private val config: Config, private val api: CookiesApi) {
 
-    companion object{
+    companion object {
         private const val REV_934_COOKIE =
             "REV_934=mobile; expires=Tue, 31 Dec 2021 12:00:20 GMT; domain=.edx.org;"
         private val FRESHNESS_INTERVAL = TimeUnit.HOURS.toMillis(1)
@@ -25,7 +25,7 @@ class AppCookieManager(private val api: CookiesApi) {
             clearWebViewCookie()
             val cookieManager = CookieManager.getInstance()
             for (cookie in Cookie.parseAll(response!!.raw().request.url, response!!.headers())) {
-                cookieManager.setCookie(org.openedx.core.BuildConfig.BASE_URL,cookie.toString())
+                cookieManager.setCookie(config.getApiHostURL(), cookie.toString())
             }
             authSessionCookieExpiration = System.currentTimeMillis() + FRESHNESS_INTERVAL
         } catch (e: Exception) {
@@ -46,7 +46,7 @@ class AppCookieManager(private val api: CookiesApi) {
     }
 
     fun setMobileCookie() {
-        CookieManager.getInstance().setCookie(org.openedx.core.BuildConfig.BASE_URL, REV_934_COOKIE)
+        CookieManager.getInstance().setCookie(config.getApiHostURL(), REV_934_COOKIE)
     }
 
-}
\ No newline at end of file
+}
diff --git a/core/src/main/java/org/openedx/core/system/DefaultWebViewClient.kt b/core/src/main/java/org/openedx/core/system/DefaultWebViewClient.kt
new file mode 100644
index 000000000..1273685c0
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/system/DefaultWebViewClient.kt
@@ -0,0 +1,85 @@
+package org.openedx.core.system
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.net.Uri
+import android.webkit.WebResourceRequest
+import android.webkit.WebResourceResponse
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import org.openedx.core.extension.isEmailValid
+import org.openedx.core.presentation.catalog.WebViewLink
+import org.openedx.core.utils.EmailUtil
+
+open class DefaultWebViewClient(
+    val context: Context,
+    val webView: WebView,
+    val isAllLinksExternal: Boolean,
+    val refreshSessionCookie: () -> Unit,
+    val onUriClick: (String, WebViewLink.Authority) -> Unit,
+) : WebViewClient() {
+
+    private var hostForThisPage: String? = null
+
+    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+        super.onPageStarted(view, url, favicon)
+
+        if (hostForThisPage == null && url != null) {
+            hostForThisPage = Uri.parse(url).host
+        }
+    }
+
+    override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
+        val clickUrl = request?.url?.toString() ?: ""
+
+        if (clickUrl.isNotEmpty() && (isAllLinksExternal || isExternalLink(clickUrl))) {
+            onUriClick(clickUrl, WebViewLink.Authority.EXTERNAL)
+            return true
+        }
+
+        return if (clickUrl.startsWith("mailto:")) {
+            val email = clickUrl.replace("mailto:", "")
+            if (email.isEmailValid()) {
+                EmailUtil.sendEmailIntent(context, email, "", "")
+                true
+            } else {
+                false
+            }
+        } else {
+            false
+        }
+    }
+
+    override fun onReceivedHttpError(
+        view: WebView,
+        request: WebResourceRequest,
+        errorResponse: WebResourceResponse,
+    ) {
+        if (request.url.toString() == view.url) {
+            when (errorResponse.statusCode) {
+                403, 401, 404 -> {
+                    refreshSessionCookie()
+                    webView.loadUrl(request.url.toString())
+                }
+            }
+        }
+        super.onReceivedHttpError(view, request, errorResponse)
+    }
+
+    private fun isExternalLink(strUrl: String?): Boolean {
+        return strUrl?.let { url ->
+            val uri = Uri.parse(url)
+            val externalLinkValue = if (uri.isHierarchical) {
+                uri.getQueryParameter(QUERY_PARAM_EXTERNAL_LINK)
+            } else {
+                null
+            }
+            hostForThisPage != null && hostForThisPage != uri.host ||
+                    externalLinkValue?.toBoolean() == true
+        } ?: false
+    }
+
+    companion object {
+        const val QUERY_PARAM_EXTERNAL_LINK = "external_link"
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/system/notifier/AppUpgradeEvent.kt b/core/src/main/java/org/openedx/core/system/notifier/AppUpgradeEvent.kt
new file mode 100644
index 000000000..f99086a11
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/system/notifier/AppUpgradeEvent.kt
@@ -0,0 +1,6 @@
+package org.openedx.core.system.notifier
+
+sealed class AppUpgradeEvent {
+    object UpgradeRequiredEvent : AppUpgradeEvent()
+    class UpgradeRecommendedEvent(val newVersionName: String) : AppUpgradeEvent()
+}
diff --git a/core/src/main/java/org/openedx/core/system/notifier/AppUpgradeNotifier.kt b/core/src/main/java/org/openedx/core/system/notifier/AppUpgradeNotifier.kt
new file mode 100644
index 000000000..0f5a274d5
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/system/notifier/AppUpgradeNotifier.kt
@@ -0,0 +1,15 @@
+package org.openedx.core.system.notifier
+
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+
+class AppUpgradeNotifier {
+
+    private val channel = MutableSharedFlow<AppUpgradeEvent>(replay = 0, extraBufferCapacity = 0)
+
+    val notifier: Flow<AppUpgradeEvent> = channel.asSharedFlow()
+
+    suspend fun send(event: AppUpgradeEvent) = channel.emit(event)
+
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/system/notifier/CourseCompletionSet.kt b/core/src/main/java/org/openedx/core/system/notifier/CourseCompletionSet.kt
new file mode 100644
index 000000000..ae2450a9c
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/system/notifier/CourseCompletionSet.kt
@@ -0,0 +1,3 @@
+package org.openedx.core.system.notifier
+
+class CourseCompletionSet : CourseEvent
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/system/notifier/CourseNotifier.kt b/core/src/main/java/org/openedx/core/system/notifier/CourseNotifier.kt
index 93b00e722..3b5c48099 100644
--- a/core/src/main/java/org/openedx/core/system/notifier/CourseNotifier.kt
+++ b/core/src/main/java/org/openedx/core/system/notifier/CourseNotifier.kt
@@ -15,5 +15,6 @@ class CourseNotifier {
     suspend fun send(event: CourseDashboardUpdate) = channel.emit(event)
     suspend fun send(event: CourseSubtitleLanguageChanged) = channel.emit(event)
     suspend fun send(event: CourseSectionChanged) = channel.emit(event)
+    suspend fun send(event: CourseCompletionSet) = channel.emit(event)
 
 }
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/system/notifier/CourseVideoPositionChanged.kt b/core/src/main/java/org/openedx/core/system/notifier/CourseVideoPositionChanged.kt
index a06a6b7e2..af7a0583e 100644
--- a/core/src/main/java/org/openedx/core/system/notifier/CourseVideoPositionChanged.kt
+++ b/core/src/main/java/org/openedx/core/system/notifier/CourseVideoPositionChanged.kt
@@ -2,5 +2,6 @@ package org.openedx.core.system.notifier
 
 data class CourseVideoPositionChanged(
     val videoUrl: String,
-    val videoTime: Long
+    val videoTime: Long,
+    val isPlaying: Boolean
 ) : CourseEvent
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
index af884aef7..80f61d75d 100644
--- a/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
+++ b/core/src/main/java/org/openedx/core/ui/ComposeCommon.kt
@@ -1,30 +1,66 @@
 package org.openedx.core.ui
 
+import android.content.Context
 import android.os.Build.VERSION.SDK_INT
 import android.widget.Toast
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.text.ClickableText
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.*
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Divider
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.OutlinedButton
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.ScaffoldState
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.TextFieldDefaults
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Search
-import androidx.compose.runtime.*
+import androidx.compose.material.icons.filled.Wifi
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.NonRestartableComposable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.drawWithContent
-import androidx.compose.ui.focus.*
+import androidx.compose.ui.focus.FocusDirection
+import androidx.compose.ui.focus.FocusManager
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -33,15 +69,23 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.*
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.input.*
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import coil.ImageLoader
@@ -54,6 +98,7 @@ import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.Course
 import org.openedx.core.domain.model.RegistrationField
 import org.openedx.core.extension.LinkedImageText
+import org.openedx.core.extension.toastMessage
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
@@ -96,6 +141,34 @@ fun StaticSearchBar(
     }
 }
 
+@Composable
+fun Toolbar(
+    modifier: Modifier = Modifier,
+    label: String,
+    canShowBackBtn: Boolean = false,
+    onBackClick: () -> Unit = {}
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(48.dp),
+    ) {
+        if (canShowBackBtn) {
+            BackBtn(onBackClick = onBackClick)
+        }
+
+        Text(
+            modifier = Modifier
+                .align(Alignment.Center),
+            text = label,
+            color = MaterialTheme.appColors.textPrimary,
+            style = MaterialTheme.appTypography.titleMedium,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            textAlign = TextAlign.Center,
+        )
+    }
+}
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
@@ -150,7 +223,9 @@ fun SearchBar(
         ),
         placeholder = {
             Text(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .testTag("txt_search_placeholder")
+                    .fillMaxWidth(),
                 text = label,
                 color = MaterialTheme.appColors.textSecondary,
                 style = MaterialTheme.appTypography.bodyMedium
@@ -291,8 +366,7 @@ fun HandleUIMessage(
             }
 
             is UIMessage.ToastMessage -> {
-                val message = uiMessage.message
-                Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
+                context.toastMessage(uiMessage.message)
             }
 
             else -> {}
@@ -510,6 +584,7 @@ fun SheetContent(
     ) {
         Text(
             modifier = Modifier
+                .testTag("txt_selection_title")
                 .fillMaxWidth()
                 .padding(10.dp),
             textAlign = TextAlign.Center,
@@ -518,6 +593,7 @@ fun SheetContent(
         )
         SearchBarStateless(
             modifier = Modifier
+                .testTag("sb_search")
                 .fillMaxWidth()
                 .height(48.dp)
                 .padding(horizontal = 16.dp),
@@ -538,6 +614,7 @@ fun SheetContent(
             }) { item ->
                 Text(
                     modifier = Modifier
+                        .testTag("txt_${item.value}_title")
                         .fillMaxWidth()
                         .padding(horizontal = 16.dp)
                         .clickable {
@@ -730,7 +807,13 @@ fun AutoSizeText(
 }
 
 @Composable
-fun DiscoveryCourseItem(course: Course, windowSize: WindowSize, onClick: (String) -> Unit) {
+fun DiscoveryCourseItem(
+    apiHostUrl: String,
+    course: Course,
+    windowSize: WindowSize,
+    onClick: (String) -> Unit
+) {
+
     val imageWidth by remember(key1 = windowSize) {
         mutableStateOf(
             windowSize.windowSizeValue(
@@ -740,7 +823,7 @@ fun DiscoveryCourseItem(course: Course, windowSize: WindowSize, onClick: (String
         )
     }
 
-    val imageUrl = org.openedx.core.BuildConfig.BASE_URL.dropLast(1) + course.media.courseImage?.uri
+    val imageUrl = apiHostUrl.dropLast(1) + course.media.courseImage?.uri
     Surface(
         modifier = Modifier
             .fillMaxWidth()
@@ -885,6 +968,7 @@ fun TextIcon(
     painter: Painter,
     color: Color,
     textStyle: TextStyle = MaterialTheme.appTypography.bodySmall,
+    iconModifier: Modifier = Modifier,
     onClick: (() -> Unit)? = null,
 ) {
     val modifier = if (onClick == null) {
@@ -899,7 +983,8 @@ fun TextIcon(
     ) {
         Text(text = text, color = color, style = textStyle)
         Icon(
-            modifier = Modifier.size((textStyle.fontSize.value + 4).dp),
+            modifier = iconModifier
+                .size((textStyle.fontSize.value + 4).dp),
             painter = painter,
             contentDescription = null,
             tint = color
@@ -951,7 +1036,7 @@ fun OfflineModeDialog(
 @Composable
 fun OpenEdXButton(
     width: Modifier = Modifier.fillMaxWidth(),
-    text: String,
+    text: String = "",
     onClick: () -> Unit,
     enabled: Boolean = true,
     backgroundColor: Color = MaterialTheme.appColors.buttonBackground,
@@ -986,7 +1071,7 @@ fun OpenEdXOutlinedButton(
     backgroundColor: Color = Color.Transparent,
     borderColor: Color,
     textColor: Color,
-    text: String,
+    text: String = "",
     onClick: () -> Unit,
     content: (@Composable RowScope.() -> Unit)? = null
 ) {
@@ -1017,7 +1102,7 @@ fun BackBtn(
     tint: Color = MaterialTheme.appColors.primary,
     onBackClick: () -> Unit
 ) {
-    IconButton(modifier = modifier,
+    IconButton(modifier = modifier.testTag("ib_back"),
         onClick = { onBackClick() }) {
         Icon(
             painter = painterResource(id = R.drawable.core_ic_back),
@@ -1027,6 +1112,68 @@ fun BackBtn(
     }
 }
 
+@Composable
+fun ConnectionErrorView(
+    modifier: Modifier,
+    onReloadClick: () -> Unit
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Icon(
+            modifier = Modifier.size(100.dp),
+            imageVector = Icons.Filled.Wifi,
+            contentDescription = null,
+            tint = MaterialTheme.appColors.onSurface
+        )
+        Spacer(Modifier.height(16.dp))
+        Text(
+            modifier = Modifier.fillMaxWidth(0.6f),
+            text = stringResource(id = R.string.core_not_connected_to_internet),
+            color = MaterialTheme.appColors.textPrimary,
+            style = MaterialTheme.appTypography.titleMedium,
+            textAlign = TextAlign.Center
+        )
+        Spacer(Modifier.height(16.dp))
+        OpenEdXButton(
+            width = Modifier
+                .widthIn(Dp.Unspecified, 162.dp),
+            text = stringResource(id = R.string.core_reload),
+            onClick = onReloadClick
+        )
+    }
+}
+
+@Composable
+fun AuthButtonsPanel(
+    onRegisterClick: () -> Unit,
+    onSignInClick: () -> Unit
+) {
+    Row {
+        OpenEdXButton(
+            width = Modifier
+                .testTag("btn_register")
+                .width(0.dp)
+                .weight(1f),
+            text = stringResource(id = R.string.core_register),
+            onClick = { onRegisterClick() }
+        )
+
+        OpenEdXOutlinedButton(
+            modifier = Modifier
+                .testTag("btn_sign_in")
+                .width(100.dp)
+                .padding(start = 16.dp),
+            text = stringResource(id = R.string.core_sign_in),
+            onClick = { onSignInClick() },
+            borderColor = MaterialTheme.appColors.textFieldBorder,
+            textColor = MaterialTheme.appColors.primary
+        )
+    }
+}
+
 @Preview
 @Composable
 private fun StaticSearchBarPreview() {
@@ -1049,3 +1196,23 @@ private fun SearchBarPreview() {
         onClearValue = {}
     )
 }
+
+@Preview
+@Composable
+private fun ToolbarPreview() {
+    Toolbar(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(MaterialTheme.appColors.background)
+            .height(48.dp),
+        label = "Toolbar",
+        canShowBackBtn = true,
+        onBackClick = {}
+    )
+}
+
+@Preview
+@Composable
+private fun AuthButtonsPanelPreview() {
+    AuthButtonsPanel(onRegisterClick = {}, onSignInClick = {})
+}
diff --git a/core/src/main/java/org/openedx/core/ui/ComposeExtensions.kt b/core/src/main/java/org/openedx/core/ui/ComposeExtensions.kt
index 424bf6066..0cfa9c57c 100644
--- a/core/src/main/java/org/openedx/core/ui/ComposeExtensions.kt
+++ b/core/src/main/java/org/openedx/core/ui/ComposeExtensions.kt
@@ -1,25 +1,42 @@
 package org.openedx.core.ui
 
+import android.content.res.Configuration
 import android.graphics.Rect
 import android.view.ViewTreeObserver
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.MutatePriority
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.runtime.*
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.ReadOnlyComposable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.mapSaver
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.PathEffect
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.platform.LocalView
-import org.openedx.core.presentation.global.InsetHolder
+import androidx.compose.ui.unit.Dp
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.awaitCancellation
 import kotlinx.coroutines.launch
+import org.openedx.core.presentation.global.InsetHolder
 
 inline val isPreview: Boolean
     @ReadOnlyComposable
@@ -59,6 +76,16 @@ fun Modifier.statusBarsInset(): Modifier = composed {
         .padding(top = with(LocalDensity.current) { topInset.toDp() })
 }
 
+fun Modifier.displayCutoutForLandscape(): Modifier = composed {
+    val cutoutInset = (LocalContext.current as? InsetHolder)?.cutoutInset ?: 0
+    val cutoutInsetDp = with(LocalDensity.current) { cutoutInset.toDp() }
+    return@composed if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+        this.padding(horizontal = cutoutInsetDp)
+    } else {
+        this
+    }
+}
+
 inline fun Modifier.noRippleClickable(crossinline onClick: () -> Unit): Modifier = composed {
     clickable(
         indication = null,
@@ -67,6 +94,35 @@ inline fun Modifier.noRippleClickable(crossinline onClick: () -> Unit): Modifier
     }
 }
 
+fun Modifier.roundBorderWithoutBottom(borderWidth: Dp, cornerRadius: Dp): Modifier = composed(
+    factory = {
+        var path: Path
+        this.then(
+            Modifier.drawWithCache {
+                val height = this.size.height
+                val width = this.size.width
+                onDrawWithContent {
+                    drawContent()
+                    path = Path().apply {
+                        moveTo(width.times(0f), height.times(1f))
+                        lineTo(width.times(0f), height.times(0f))
+                        lineTo(width.times(1f), height.times(0f))
+                        lineTo(width.times(1f), height.times(1f))
+                    }
+                    drawPath(
+                        path = path,
+                        color = Color.LightGray,
+                        style = Stroke(
+                            width = borderWidth.toPx(),
+                            pathEffect = PathEffect.cornerPathEffect(cornerRadius.toPx())
+                        )
+                    )
+                }
+            }
+        )
+    }
+)
+
 @Composable
 fun <T : Any> rememberSaveableMap(init: () -> MutableMap<String, T?>): MutableMap<String, T?> {
     return rememberSaveable(
@@ -119,3 +175,7 @@ fun LazyListState.reEnableScrolling(scope: CoroutineScope) {
     }
 }
 
+@OptIn(ExperimentalFoundationApi::class)
+fun PagerState.calculateCurrentOffsetForPage(page: Int): Float {
+    return (currentPage - page) + currentPageOffsetFraction
+}
\ No newline at end of file
diff --git a/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt b/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt
new file mode 100644
index 000000000..e58879326
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/ui/WebContentScreen.kt
@@ -0,0 +1,213 @@
+package org.openedx.core.ui
+
+import android.annotation.SuppressLint
+import android.content.Intent
+import android.net.Uri
+import android.webkit.WebResourceRequest
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.compose.ui.zIndex
+import org.openedx.core.extension.isEmailValid
+import org.openedx.core.extension.replaceLinkTags
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.utils.EmailUtil
+import java.nio.charset.StandardCharsets
+
+@Composable
+fun WebContentScreen(
+    windowSize: WindowSize,
+    apiHostUrl: String? = null,
+    title: String,
+    onBackClick: () -> Unit,
+    htmlBody: String? = null,
+    contentUrl: String? = null,
+) {
+    val scaffoldState = rememberScaffoldState()
+    Scaffold(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(bottom = 16.dp),
+        scaffoldState = scaffoldState,
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+
+        val screenWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier.widthIn(Dp.Unspecified, 560.dp),
+                    compact = Modifier.fillMaxWidth()
+                )
+            )
+        }
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(it)
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
+            contentAlignment = Alignment.TopCenter
+        ) {
+            Column(screenWidth) {
+                Box(
+                    Modifier
+                        .fillMaxWidth()
+                        .zIndex(1f),
+                    contentAlignment = Alignment.CenterStart
+                ) {
+                    BackBtn {
+                        onBackClick()
+                    }
+
+                    Text(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 56.dp),
+                        text = title,
+                        color = MaterialTheme.appColors.textPrimary,
+                        style = MaterialTheme.appTypography.titleMedium,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        textAlign = TextAlign.Center
+                    )
+                }
+                Spacer(Modifier.height(6.dp))
+                Surface(
+                    Modifier.fillMaxSize(),
+                    color = MaterialTheme.appColors.background
+                ) {
+                    if (htmlBody.isNullOrEmpty() && contentUrl.isNullOrEmpty()) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .background(MaterialTheme.appColors.background)
+                                .zIndex(1f),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                        }
+                    } else {
+                        var webViewAlpha by rememberSaveable { mutableFloatStateOf(0f) }
+                        Surface(
+                            Modifier
+                                .padding(horizontal = 16.dp, vertical = 24.dp)
+                                .alpha(webViewAlpha),
+                            color = MaterialTheme.appColors.background
+                        ) {
+                            WebViewContent(
+                                apiHostUrl = apiHostUrl,
+                                body = htmlBody,
+                                contentUrl = contentUrl,
+                                onWebPageLoaded = {
+                                    webViewAlpha = 1f
+                                })
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+@SuppressLint("SetJavaScriptEnabled")
+private fun WebViewContent(
+    apiHostUrl: String? = null,
+    body: String? = null,
+    contentUrl: String? = null,
+    onWebPageLoaded: () -> Unit
+) {
+    val context = LocalContext.current
+    val isDarkTheme = isSystemInDarkTheme()
+    AndroidView(
+        factory = {
+            WebView(context).apply {
+                webViewClient = object : WebViewClient() {
+                    override fun onPageCommitVisible(view: WebView?, url: String?) {
+                        super.onPageCommitVisible(view, url)
+                        onWebPageLoaded()
+                    }
+
+                    override fun shouldOverrideUrlLoading(
+                        view: WebView?,
+                        request: WebResourceRequest?
+                    ): Boolean {
+                        val clickUrl = request?.url?.toString() ?: ""
+                        return if (clickUrl.isNotEmpty() &&
+                            (clickUrl.startsWith("http://") ||
+                                    clickUrl.startsWith("https://"))
+                        ) {
+                            context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(clickUrl)))
+                            true
+                        } else if (clickUrl.startsWith("mailto:")) {
+                            val email = clickUrl.replace("mailto:", "")
+                            if (email.isEmailValid()) {
+                                EmailUtil.sendEmailIntent(context, email, "", "")
+                                true
+                            } else {
+                                false
+                            }
+                        } else {
+                            false
+                        }
+                    }
+                }
+                with(settings) {
+                    javaScriptEnabled = true
+                    loadWithOverviewMode = true
+                    builtInZoomControls = false
+                    setSupportZoom(true)
+                    loadsImagesAutomatically = true
+                    domStorageEnabled = true
+                }
+                isVerticalScrollBarEnabled = false
+                isHorizontalScrollBarEnabled = false
+                body?.let {
+                    loadDataWithBaseURL(
+                        apiHostUrl,
+                        body.replaceLinkTags(isDarkTheme),
+                        "text/html",
+                        StandardCharsets.UTF_8.name(),
+                        null
+                    )
+                }
+                contentUrl?.let {
+                    loadUrl(it)
+                }
+            }
+        },
+    )
+}
diff --git a/core/src/main/java/org/openedx/core/ui/theme/Color.kt b/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt
similarity index 71%
rename from core/src/main/java/org/openedx/core/ui/theme/Color.kt
rename to core/src/main/java/org/openedx/core/ui/theme/AppColors.kt
index 4dedf421c..23d82a4c6 100644
--- a/core/src/main/java/org/openedx/core/ui/theme/Color.kt
+++ b/core/src/main/java/org/openedx/core/ui/theme/AppColors.kt
@@ -29,7 +29,26 @@ data class AppColors(
     val certificateForeground: Color,
     val bottomSheetToggle: Color,
     val warning: Color,
-    val info: Color
+    val info: Color,
+
+    val rateStars: Color,
+    val inactiveButtonBackground: Color,
+    val inactiveButtonText: Color,
+
+    val accessGreen: Color,
+
+    val datesSectionBarPastDue: Color,
+    val datesSectionBarToday: Color,
+    val datesSectionBarThisWeek: Color,
+    val datesSectionBarNextWeek: Color,
+    val datesSectionBarUpcoming: Color,
+
+    val authFacebookButtonBackground: Color,
+    val authMicrosoftButtonBackground: Color,
+
+    val componentHorizontalProgressCompleted: Color,
+    val componentHorizontalProgressSelected: Color,
+    val componentHorizontalProgressDefault: Color,
 ) {
     val primary: Color get() = material.primary
     val primaryVariant: Color get() = material.primaryVariant
diff --git a/core/src/main/java/org/openedx/core/ui/theme/Shape.kt b/core/src/main/java/org/openedx/core/ui/theme/Shape.kt
index 0cb58604f..eed4d481d 100644
--- a/core/src/main/java/org/openedx/core/ui/theme/Shape.kt
+++ b/core/src/main/java/org/openedx/core/ui/theme/Shape.kt
@@ -1,17 +1,10 @@
 package org.openedx.core.ui.theme
 
 import androidx.compose.foundation.shape.CornerBasedShape
-import androidx.compose.foundation.shape.CornerSize
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Shapes
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.ReadOnlyComposable
-import androidx.compose.runtime.staticCompositionLocalOf
-import androidx.compose.ui.geometry.*
-import androidx.compose.ui.graphics.Outline
-import androidx.compose.ui.unit.LayoutDirection
-import androidx.compose.ui.unit.dp
 
 data class AppShapes(
     val material: Shapes,
@@ -22,27 +15,9 @@ data class AppShapes(
     val cardShape: CornerBasedShape,
     val screenBackgroundShapeFull: CornerBasedShape,
     val courseImageShape: CornerBasedShape,
-    val dialogShape: CornerBasedShape
+    val dialogShape: CornerBasedShape,
 )
 
-internal val LocalShapes = staticCompositionLocalOf {
-    AppShapes(
-        material = Shapes(
-            small = RoundedCornerShape(4.dp),
-            medium = RoundedCornerShape(8.dp),
-            large = RoundedCornerShape(0.dp)
-        ),
-        buttonShape = RoundedCornerShape(8.dp),
-        navigationButtonShape = RoundedCornerShape(8.dp),
-        textFieldShape = RoundedCornerShape(CornerSize(8.dp)),
-        screenBackgroundShape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp),
-        cardShape = RoundedCornerShape(12.dp),
-        screenBackgroundShapeFull = RoundedCornerShape(24.dp),
-        courseImageShape = RoundedCornerShape(8.dp),
-        dialogShape = RoundedCornerShape(24.dp)
-    )
-}
-
 val MaterialTheme.appShapes: AppShapes
     @Composable
     @ReadOnlyComposable
diff --git a/core/src/main/java/org/openedx/core/ui/theme/Theme.kt b/core/src/main/java/org/openedx/core/ui/theme/Theme.kt
index a468ebb72..fbe6d80b5 100644
--- a/core/src/main/java/org/openedx/core/ui/theme/Theme.kt
+++ b/core/src/main/java/org/openedx/core/ui/theme/Theme.kt
@@ -9,90 +9,127 @@ import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
-import androidx.compose.ui.graphics.Color
 
 private val DarkColorPalette = AppColors(
     material = darkColors(
-        primary = Color(0xFF5478F9),
-        primaryVariant = Color(0xFF3700B3),
-        secondary = Color(0xFF03DAC6),
-        secondaryVariant = Color(0xFF373E4F),
-        background = Color(0xFF19212F),
-        surface = Color(0xFF273346),
-        error = Color(0xFFFF3D71),
-        onPrimary = Color.Black,
-        onSecondary = Color.Black,
-        onBackground = Color.White,
-        onSurface = Color.White,
-        onError = Color.Black
+        primary = dark_primary,
+        primaryVariant = dark_primary_variant,
+        secondary = dark_secondary,
+        secondaryVariant = dark_secondary_variant,
+        background = dark_background,
+        surface = dark_surface,
+        error = dark_error,
+        onPrimary = dark_onPrimary,
+        onSecondary = dark_onSecondary,
+        onBackground = dark_onBackground,
+        onSurface = dark_onSurface,
+        onError = dark_onError
     ),
-    textPrimary = Color.White,
-    textPrimaryVariant = Color(0xFF79889F),
-    textSecondary = Color(0xFFB3B3B3),
-    textDark = Color(0xFF19212F),
-    textAccent = Color(0xFF5478F9),
-
-    textFieldBackground = Color(0xFF273346),
-    textFieldBackgroundVariant = Color(0xFF273346),
-    textFieldBorder = Color(0xFF4E5A70),
-    textFieldText = Color.White,
-    textFieldHint = Color(0xFF79889F),
-
-    buttonBackground = Color(0xFF5478F9),
-    buttonSecondaryBackground = Color(0xFF79889F),
-    buttonText = Color.White,
-
-    cardViewBackground = Color(0xFF273346),
-    cardViewBorder = Color(0xFF4E5A70),
-    divider = Color(0xFF4E5A70),
-
-    certificateForeground = Color(0xD92EB865),
-    bottomSheetToggle = Color(0xFF4E5A70),
-
-    warning = Color(0xFFFFC248),
-    info = Color(0xFF0095FF)
+    textPrimary = dark_text_primary,
+    textPrimaryVariant = dark_text_primary_variant,
+    textSecondary = dark_text_secondary,
+    textDark = dark_text_dark,
+    textAccent = dark_text_accent,
+
+    textFieldBackground = dark_text_field_background,
+    textFieldBackgroundVariant = dark_text_field_background_variant,
+    textFieldBorder = dark_text_field_border,
+    textFieldText = dark_text_field_text,
+    textFieldHint = dark_text_field_hint,
+
+    buttonBackground = dark_button_background,
+    buttonSecondaryBackground = dark_button_secondary_background,
+    buttonText = dark_button_text,
+
+    cardViewBackground = dark_card_view_background,
+    cardViewBorder = dark_card_view_border,
+    divider = dark_divider,
+
+    certificateForeground = dark_certificate_foreground,
+    bottomSheetToggle = dark_bottom_sheet_toggle,
+
+    warning = dark_warning,
+    info = dark_info,
+
+    rateStars = dark_rate_stars,
+    inactiveButtonBackground = dark_inactive_button_background,
+    inactiveButtonText = dark_button_text,
+
+    accessGreen = dark_access_green,
+
+    datesSectionBarPastDue = dark_dates_section_bar_past_due,
+    datesSectionBarToday = dark_dates_section_bar_today,
+    datesSectionBarThisWeek = dark_dates_section_bar_this_week,
+    datesSectionBarNextWeek = dark_dates_section_bar_next_week,
+    datesSectionBarUpcoming = dark_dates_section_bar_upcoming,
+
+    authFacebookButtonBackground = dark_auth_facebook_button_background,
+    authMicrosoftButtonBackground = dark_auth_microsoft_button_background,
+
+    componentHorizontalProgressCompleted = dark_component_horizontal_progress_completed,
+    componentHorizontalProgressSelected = dark_component_horizontal_progress_selected,
+    componentHorizontalProgressDefault = dark_component_horizontal_progress_default,
 )
 
 private val LightColorPalette = AppColors(
     material = lightColors(
-        primary = Color(0xFF3C68FF),
-        primaryVariant = Color(0x9ADEFAFF),
-        secondary = Color(0xFF94D3DD),
-        secondaryVariant = Color(0xFF94D3DD),
-        background = Color.White,
-        surface = Color(0xFFF7F7F8),
-        error = Color(0xFFFF3D71),
-        onPrimary = Color.White,
-        onSecondary = Color.Black,
-        onBackground = Color.Black,
-        onSurface = Color.Black,
-        onError = Color.White
+        primary = light_primary,
+        primaryVariant = light_primary_variant,
+        secondary = light_secondary,
+        secondaryVariant = light_secondary_variant,
+        background = light_background,
+        surface = light_surface,
+        error = light_error,
+        onPrimary = light_onPrimary,
+        onSecondary = light_onSecondary,
+        onBackground = light_onBackground,
+        onSurface = light_onSurface,
+        onError = light_onError
     ),
-    textPrimary = Color(0xFF212121),
-    textPrimaryVariant = Color(0xFF3D4964),
-    textSecondary = Color(0xFFB3B3B3),
-    textDark = Color(0xFF19212F),
-    textAccent = Color(0xFF3C68FF),
-
-    textFieldBackground = Color(0xFFF7F7F8),
-    textFieldBackgroundVariant = Color.White,
-    textFieldBorder = Color(0xFF97A5BB),
-    textFieldText = Color(0xFF3D4964),
-    textFieldHint = Color(0xFF97A5BB),
-
-    buttonBackground = Color(0xFF3C68FF),
-    buttonSecondaryBackground = Color(0xFF79889F),
-    buttonText = Color.White,
-
-    cardViewBackground = Color(0xFFF9FAFB),
-    cardViewBorder = Color(0xFFCCD4E0),
-    divider = Color(0xFFCCD4E0),
-
-    certificateForeground = Color(0xD94BD191),
-    bottomSheetToggle = Color(0xFF4E5A70),
-
-    warning = Color(0xFFFFC94D),
-    info = Color(0xFF42AAFF)
+    textPrimary = light_text_primary,
+    textPrimaryVariant = light_text_primary_variant,
+    textSecondary = light_text_secondary,
+    textDark = light_text_dark,
+    textAccent = light_text_accent,
+
+    textFieldBackground = light_text_field_background,
+    textFieldBackgroundVariant = light_text_field_background_variant,
+    textFieldBorder = light_text_field_border,
+    textFieldText = light_text_field_text,
+    textFieldHint = light_text_field_hint,
+
+    buttonBackground = light_button_background,
+    buttonSecondaryBackground = light_button_secondary_background,
+    buttonText = light_button_text,
+
+    cardViewBackground = light_card_view_background,
+    cardViewBorder = light_card_view_border,
+    divider = light_divider,
+
+    certificateForeground = light_certificate_foreground,
+    bottomSheetToggle = light_bottom_sheet_toggle,
+
+    warning = light_warning,
+    info = light_info,
+
+    rateStars = light_rate_stars,
+    inactiveButtonBackground = light_inactive_button_background,
+    inactiveButtonText = light_button_text,
+
+    accessGreen = light_access_green,
+
+    datesSectionBarPastDue = light_dates_section_bar_past_due,
+    datesSectionBarToday = light_dates_section_bar_today,
+    datesSectionBarThisWeek = light_dates_section_bar_this_week,
+    datesSectionBarNextWeek = light_dates_section_bar_next_week,
+    datesSectionBarUpcoming = light_dates_section_bar_upcoming,
+
+    authFacebookButtonBackground = light_auth_facebook_button_background,
+    authMicrosoftButtonBackground = light_auth_microsoft_button_background,
+
+    componentHorizontalProgressCompleted = light_component_horizontal_progress_completed,
+    componentHorizontalProgressSelected = light_component_horizontal_progress_selected,
+    componentHorizontalProgressDefault = light_component_horizontal_progress_default,
 )
 
 val MaterialTheme.appColors: AppColors
diff --git a/core/src/main/java/org/openedx/core/ui/theme/Type.kt b/core/src/main/java/org/openedx/core/ui/theme/Type.kt
index 42721e5de..edd2afcc7 100644
--- a/core/src/main/java/org/openedx/core/ui/theme/Type.kt
+++ b/core/src/main/java/org/openedx/core/ui/theme/Type.kt
@@ -5,10 +5,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
+import org.openedx.core.R
 
 data class AppTypography(
+    val defaultFontFamily: FontFamily,
     val displayLarge: TextStyle,
     val displayMedium: TextStyle,
     val displaySmall: TextStyle,
@@ -26,7 +31,17 @@ data class AppTypography(
     val labelSmall: TextStyle
 )
 
-
+val fontFamily = FontFamily(
+    Font(R.font.regular, FontWeight.Black, FontStyle.Normal),
+    Font(R.font.bold, FontWeight.Bold, FontStyle.Normal),
+    Font(R.font.bold, FontWeight.Bold, FontStyle.Normal),
+    Font(R.font.extra_light, FontWeight.Light, FontStyle.Normal),
+    Font(R.font.light, FontWeight.Light, FontStyle.Normal),
+    Font(R.font.medium, FontWeight.Medium, FontStyle.Normal),
+    Font(R.font.regular, FontWeight.Normal, FontStyle.Normal),
+    Font(R.font.semi_bold, FontWeight.Bold, FontStyle.Normal),
+    Font(R.font.thin, FontWeight.Thin, FontStyle.Normal),
+)
 
 
 internal val LocalTypography = staticCompositionLocalOf {
@@ -35,92 +50,108 @@ internal val LocalTypography = staticCompositionLocalOf {
             fontSize = 57.sp,
             lineHeight = 64.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = (-0.25).sp
+            letterSpacing = (-0.25).sp,
+            fontFamily = fontFamily
         ),
         displayMedium = TextStyle(
             fontSize = 45.sp,
             lineHeight = 52.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.sp
+            letterSpacing = 0.sp,
+            fontFamily = fontFamily
         ),
         displaySmall = TextStyle(
             fontSize = 36.sp,
             lineHeight = 44.sp,
             fontWeight = FontWeight.Bold,
-            letterSpacing = 0.sp
+            letterSpacing = 0.sp,
+            fontFamily = fontFamily
         ),
         headlineLarge = TextStyle(
             fontSize = 32.sp,
             lineHeight = 40.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.sp
+            letterSpacing = 0.sp,
+            fontFamily = fontFamily
         ),
         headlineMedium = TextStyle(
             fontSize = 28.sp,
             lineHeight = 36.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.sp
+            letterSpacing = 0.sp,
+            fontFamily = fontFamily
         ),
         headlineSmall = TextStyle(
             fontSize = 24.sp,
             lineHeight = 32.sp,
             fontWeight = FontWeight.SemiBold,
-            letterSpacing = 0.sp
+            letterSpacing = 0.sp,
+            fontFamily = fontFamily
         ),
         titleLarge = TextStyle(
             fontSize = 22.sp,
             lineHeight = 28.sp,
             fontWeight = FontWeight.Bold,
-            letterSpacing = 0.sp
+            letterSpacing = 0.sp,
+            fontFamily = fontFamily
         ),
         titleMedium = TextStyle(
             fontSize = 16.sp,
             lineHeight = 24.sp,
             fontWeight = FontWeight.SemiBold,
-            letterSpacing = 0.1.sp
+            letterSpacing = 0.1.sp,
+            fontFamily = fontFamily
         ),
         titleSmall = TextStyle(
             fontSize = 14.sp,
             lineHeight = 20.sp,
             fontWeight = FontWeight.Medium,
-            letterSpacing = 0.1.sp
+            letterSpacing = 0.1.sp,
+            fontFamily = fontFamily
         ),
         bodyLarge = TextStyle(
             fontSize = 16.sp,
             lineHeight = 24.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.5.sp
+            letterSpacing = 0.5.sp,
+            fontFamily = fontFamily
         ),
         bodyMedium = TextStyle(
             fontSize = 14.sp,
             lineHeight = 20.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.25.sp
+            letterSpacing = 0.25.sp,
+            fontFamily = fontFamily
         ),
         bodySmall = TextStyle(
             fontSize = 12.sp,
             lineHeight = 16.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.4.sp
+            letterSpacing = 0.4.sp,
+            fontFamily = fontFamily
         ),
         labelLarge = TextStyle(
             fontSize = 14.sp,
             lineHeight = 20.sp,
             fontWeight = FontWeight.Medium,
-            letterSpacing = 0.1.sp
+            letterSpacing = 0.1.sp,
+            fontFamily = fontFamily
         ),
         labelMedium = TextStyle(
             fontSize = 12.sp,
             lineHeight = 16.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.5.sp
+            letterSpacing = 0.5.sp,
+            fontFamily = fontFamily
         ),
         labelSmall = TextStyle(
             fontSize = 10.sp,
             lineHeight = 16.sp,
             fontWeight = FontWeight.Normal,
-            letterSpacing = 0.sp
-        )
+            letterSpacing = 0.sp,
+            fontFamily = fontFamily
+        ),
+        defaultFontFamily = fontFamily
     )
 }
 
diff --git a/core/src/main/java/org/openedx/core/utils/EmailUtil.kt b/core/src/main/java/org/openedx/core/utils/EmailUtil.kt
index 2e78934bb..c56b606ae 100644
--- a/core/src/main/java/org/openedx/core/utils/EmailUtil.kt
+++ b/core/src/main/java/org/openedx/core/utils/EmailUtil.kt
@@ -3,6 +3,7 @@ package org.openedx.core.utils
 import android.content.ActivityNotFoundException
 import android.content.Context
 import android.content.Intent
+import android.net.Uri
 import android.os.Build
 import android.widget.Toast
 import org.openedx.core.R
@@ -11,23 +12,24 @@ object EmailUtil {
 
     fun showFeedbackScreen(
         context: Context,
-        subject: String,
+        feedbackEmailAddress: String,
+        subject: String = context.getString(R.string.core_email_subject),
+        feedback: String = "",
         appVersion: String
     ) {
         val NEW_LINE = "\n"
-        val to = context.getString(R.string.feedback_email_address)
         val body = StringBuilder()
         with(body) {
+            append(feedback)
+            append(NEW_LINE)
+            append(NEW_LINE)
             append("${context.getString(R.string.core_android_os_version)} ${Build.VERSION.RELEASE}")
             append(NEW_LINE)
             append("${context.getString(R.string.core_app_version)} $appVersion")
             append(NEW_LINE)
             append("${context.getString(R.string.core_android_device_model)} ${Build.MODEL}")
-            append(NEW_LINE)
-            append(NEW_LINE)
-            append(context.getString(R.string.core_insert_feedback))
         }
-        sendEmailIntent(context, to, subject, body.toString())
+        sendEmailIntent(context, feedbackEmailAddress, subject, body.toString())
     }
 
     fun sendEmailIntent(
@@ -36,11 +38,12 @@ object EmailUtil {
         subject: String,
         email: String
     ) {
-        val emailIntent = Intent(Intent.ACTION_SEND)
-        emailIntent.putExtra(Intent.EXTRA_EMAIL, arrayOf(to))
-        emailIntent.putExtra(Intent.EXTRA_SUBJECT, subject)
-        emailIntent.putExtra(Intent.EXTRA_TEXT, email)
-        emailIntent.type = "plain/text"
+        val emailIntent = Intent(Intent.ACTION_SENDTO).apply {
+            data = Uri.parse("mailto:")
+            putExtra(Intent.EXTRA_EMAIL, arrayOf(to))
+            putExtra(Intent.EXTRA_SUBJECT, subject)
+            putExtra(Intent.EXTRA_TEXT, email)
+        }
         try {
             emailIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
             context?.let {
diff --git a/core/src/main/java/org/openedx/core/utils/Logger.kt b/core/src/main/java/org/openedx/core/utils/Logger.kt
new file mode 100644
index 000000000..f6bb4ecb0
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/utils/Logger.kt
@@ -0,0 +1,18 @@
+package org.openedx.core.utils
+
+import android.util.Log
+import org.openedx.core.BuildConfig
+
+class Logger(private val tag: String) {
+    fun d(message: () -> String) {
+        if (BuildConfig.DEBUG) Log.d(tag, message())
+    }
+
+    fun e(message: () -> String) {
+        if (BuildConfig.DEBUG) Log.e(tag, message())
+    }
+
+    fun w(message: () -> String) {
+        if (BuildConfig.DEBUG) Log.w(tag, message())
+    }
+}
diff --git a/core/src/main/java/org/openedx/core/utils/TimeUtils.kt b/core/src/main/java/org/openedx/core/utils/TimeUtils.kt
index bf30e40e2..e85397491 100644
--- a/core/src/main/java/org/openedx/core/utils/TimeUtils.kt
+++ b/core/src/main/java/org/openedx/core/utils/TimeUtils.kt
@@ -2,34 +2,54 @@ package org.openedx.core.utils
 
 import android.content.Context
 import android.text.format.DateUtils
+import com.google.gson.internal.bind.util.ISO8601Utils
 import org.openedx.core.R
 import org.openedx.core.domain.model.StartType
 import org.openedx.core.system.ResourceManager
 import java.text.ParseException
+import java.text.ParsePosition
 import java.text.SimpleDateFormat
-import java.util.*
+import java.util.Calendar
+import java.util.Date
+import java.util.Locale
+import java.util.concurrent.TimeUnit
+import kotlin.math.ceil
 
 object TimeUtils {
 
     private const val FORMAT_ISO_8601 = "yyyy-MM-dd'T'HH:mm:ss'Z'"
-    private const val FORMAT_APPLICATION = "dd.MM.yyyy HH:mm"
-    private const val FORMAT_DATE = "dd MMM, yyyy"
+    private const val FORMAT_ISO_8601_WITH_TIME_ZONE = "yyyy-MM-dd'T'HH:mm:ssXXX"
 
     private const val SEVEN_DAYS_IN_MILLIS = 604800000L
 
+    fun getCurrentTime(): Long {
+        return Calendar.getInstance().timeInMillis
+    }
+
     fun iso8601ToDate(text: String): Date? {
         return try {
-            val sdf = SimpleDateFormat(FORMAT_ISO_8601, Locale.getDefault())
+            val parsePosition = ParsePosition(0)
+            return ISO8601Utils.parse(text, parsePosition)
+        } catch (e: ParseException) {
+            null
+        }
+    }
+
+    fun iso8601WithTimeZoneToDate(text: String): Date? {
+        return try {
+            val sdf = SimpleDateFormat(FORMAT_ISO_8601_WITH_TIME_ZONE, Locale.getDefault())
             sdf.parse(text)
         } catch (e: ParseException) {
             null
         }
     }
 
-    fun iso8601ToDateWithTime(context: Context,text: String): String {
+    fun iso8601ToDateWithTime(context: Context, text: String): String {
         return try {
             val courseDateFormat = SimpleDateFormat(FORMAT_ISO_8601, Locale.getDefault())
-            val applicationDateFormat = SimpleDateFormat(context.getString(R.string.core_full_date_with_time), Locale.getDefault())
+            val applicationDateFormat = SimpleDateFormat(
+                context.getString(R.string.core_full_date_with_time), Locale.getDefault()
+            )
             applicationDateFormat.format(courseDateFormat.parse(text)!!)
         } catch (e: Exception) {
             e.printStackTrace()
@@ -37,14 +57,17 @@ object TimeUtils {
         }
     }
 
-    fun dateToCourseDate(resourceManager: ResourceManager, date: Date?): String {
+    private fun dateToCourseDate(resourceManager: ResourceManager, date: Date?): String {
+        return formatDate(
+            format = resourceManager.getString(R.string.core_date_format_MMMM_dd), date = date
+        )
+    }
+
+    private fun formatDate(format: String, date: Date?): String {
         if (date == null) {
             return ""
         }
-        val sdf = SimpleDateFormat(
-            resourceManager.getString(R.string.core_date_format_MMMM_dd),
-            Locale.getDefault()
-        )
+        val sdf = SimpleDateFormat(format, Locale.getDefault())
         return sdf.format(date)
     }
 
@@ -56,7 +79,7 @@ object TimeUtils {
      * @return <code>true</code> if the other date is past today,
      * <code>false</code> otherwise.
      */
-    fun isDatePassed(today: Date, otherDate: Date?): Boolean {
+    private fun isDatePassed(today: Date, otherDate: Date?): Boolean {
         return otherDate != null && today.after(otherDate)
     }
 
@@ -69,7 +92,7 @@ object TimeUtils {
         startType: String,
         startDisplay: String
     ): String {
-        var formattedDate = ""
+        val formattedDate: String
         val resourceManager = ResourceManager(context)
 
         if (isDatePassed(today, start)) {
@@ -88,8 +111,10 @@ object TimeUtils {
                         )
                     } else {
                         val timeSpan = DateUtils.getRelativeTimeSpanString(
-                            expiry.time, today.time,
-                            DateUtils.SECOND_IN_MILLIS, DateUtils.FORMAT_ABBREV_RELATIVE
+                            expiry.time,
+                            today.time,
+                            DateUtils.SECOND_IN_MILLIS,
+                            DateUtils.FORMAT_ABBREV_RELATIVE
                         ).toString()
                         resourceManager.getString(R.string.core_label_expired, timeSpan)
                     }
@@ -101,8 +126,10 @@ object TimeUtils {
                         )
                     } else {
                         val timeSpan = DateUtils.getRelativeTimeSpanString(
-                            expiry.time, today.time,
-                            DateUtils.SECOND_IN_MILLIS, DateUtils.FORMAT_ABBREV_RELATIVE
+                            expiry.time,
+                            today.time,
+                            DateUtils.SECOND_IN_MILLIS,
+                            DateUtils.FORMAT_ABBREV_RELATIVE
                         ).toString()
                         resourceManager.getString(R.string.core_label_expires, timeSpan)
                     }
@@ -121,13 +148,11 @@ object TimeUtils {
                     }
                 } else if (isDatePassed(today, end)) {
                     resourceManager.getString(
-                        R.string.core_label_ended,
-                        dateToCourseDate(resourceManager, end)
+                        R.string.core_label_ended, dateToCourseDate(resourceManager, end)
                     )
                 } else {
                     resourceManager.getString(
-                        R.string.core_label_ending,
-                        dateToCourseDate(resourceManager, end)
+                        R.string.core_label_ending, dateToCourseDate(resourceManager, end)
                     )
                 }
             }
@@ -146,4 +171,137 @@ object TimeUtils {
         return formattedDate
     }
 
-}
\ No newline at end of file
+    /**
+     * Method to get the formatted time string in terms of relative time with minimum resolution of minutes.
+     * For example, if the time difference is 1 minute, it will return "1m ago".
+     *
+     * @param date Date object to be formatted.
+     */
+    fun getFormattedTime(date: Date): String {
+        return DateUtils.getRelativeTimeSpanString(
+            date.time,
+            getCurrentTime(),
+            DateUtils.MINUTE_IN_MILLIS,
+            DateUtils.FORMAT_ABBREV_TIME
+        ).toString()
+    }
+
+    /**
+     * Returns a formatted date string for the given date.
+     */
+    fun getCourseFormattedDate(context: Context, date: Date): String {
+        val inputDate = Calendar.getInstance().also {
+            it.time = date
+            it.clearTimeComponents()
+        }
+        val daysDifference = getDayDifference(inputDate)
+
+        return when {
+            daysDifference == 0 -> {
+                context.getString(R.string.core_date_format_today)
+            }
+
+            daysDifference == 1 -> {
+                context.getString(R.string.core_date_format_tomorrow)
+            }
+
+            daysDifference == -1 -> {
+                context.getString(R.string.core_date_format_yesterday)
+            }
+
+            daysDifference in -2 downTo -7 -> {
+                context.getString(
+                    R.string.core_date_format_days_ago,
+                    ceil(-daysDifference.toDouble()).toInt().toString()
+                )
+            }
+
+            daysDifference in 2..7 -> {
+                DateUtils.formatDateTime(
+                    context,
+                    date.time,
+                    DateUtils.FORMAT_SHOW_WEEKDAY
+                )
+            }
+
+            inputDate.get(Calendar.YEAR) != Calendar.getInstance().get(Calendar.YEAR) -> {
+                DateUtils.formatDateTime(
+                    context,
+                    date.time,
+                    DateUtils.FORMAT_SHOW_DATE or DateUtils.FORMAT_SHOW_YEAR
+                )
+            }
+
+            else -> {
+                DateUtils.formatDateTime(
+                    context,
+                    date.time,
+                    DateUtils.FORMAT_SHOW_DATE or DateUtils.FORMAT_NO_YEAR
+                )
+            }
+        }
+    }
+
+    /**
+     * Returns the number of days difference between the given date and the current date.
+     */
+    private fun getDayDifference(inputDate: Calendar): Int {
+        val currentDate = Calendar.getInstance().also { it.clearTimeComponents() }
+        val difference = inputDate.timeInMillis - currentDate.timeInMillis
+        return TimeUnit.MILLISECONDS.toDays(difference).toInt()
+    }
+}
+
+/**
+ * Extension function to clear time components of a calendar.
+ * for example, if the time is 10:30:45, it will set the time to 00:00:00
+ */
+fun Calendar.clearTimeComponents() {
+    this.set(Calendar.HOUR_OF_DAY, 0)
+    this.set(Calendar.MINUTE, 0)
+    this.set(Calendar.SECOND, 0)
+    this.set(Calendar.MILLISECOND, 0)
+}
+
+/**
+ * Extension function to check if the given date is today.
+ */
+fun Date.isToday(): Boolean {
+    val calendar = Calendar.getInstance()
+    calendar.time = this
+    calendar.clearTimeComponents()
+    return calendar.time == Date().clearTime()
+}
+
+/**
+ * Extension function to add days to a date.
+ * for example, if the date is 2020-01-01 10:30:45, and days is 2, it will return 2020-01-03 00:00:00
+ */
+fun Date.addDays(days: Int): Date {
+    val calendar = Calendar.getInstance()
+    calendar.time = this
+    calendar.clearTimeComponents()
+    calendar.add(Calendar.DATE, days)
+    return calendar.time
+}
+
+/**
+ * Extension function to clear time components of a date.
+ * for example, if the date is 2020-01-01 10:30:45, it will return 2020-01-01 00:00:00
+ */
+fun Date.clearTime(): Date {
+    val calendar = Calendar.getInstance()
+    calendar.time = this
+    calendar.clearTimeComponents()
+    return calendar.time
+}
+
+/**
+ * Extension function to check if the time difference between the given date and the current date is less than 24 hours.
+ */
+fun Date.isTimeLessThan24Hours(): Boolean {
+    val calendar = Calendar.getInstance()
+    calendar.time = this
+    val timeInMillis = (calendar.timeInMillis - TimeUtils.getCurrentTime()).unaryPlus()
+    return timeInMillis < TimeUnit.DAYS.toMillis(1)
+}
diff --git a/core/src/main/java/org/openedx/core/utils/UrlUtils.kt b/core/src/main/java/org/openedx/core/utils/UrlUtils.kt
new file mode 100644
index 000000000..e90f0dfae
--- /dev/null
+++ b/core/src/main/java/org/openedx/core/utils/UrlUtils.kt
@@ -0,0 +1,26 @@
+package org.openedx.core.utils
+
+import android.content.Context
+import android.content.Intent
+import android.net.Uri
+
+object UrlUtils {
+    fun openInBrowser(activity: Context, apiHostUrl: String, url: String) {
+        if (url.isEmpty()) {
+            return
+        }
+        if (url.startsWith("/")) {
+            // Use API host as the base URL for relative paths
+            val absoluteUrl = "$apiHostUrl$url"
+            openInBrowser(activity, absoluteUrl)
+            return
+        }
+        openInBrowser(activity, url)
+    }
+
+    private fun openInBrowser(context: Context, url: String) {
+        val intent = Intent(Intent.ACTION_VIEW)
+        intent.setData(Uri.parse(url))
+        context.startActivity(intent)
+    }
+}
diff --git a/core/src/main/res/drawable/core_ic_assignment.xml b/core/src/main/res/drawable/core_ic_assignment.xml
new file mode 100644
index 000000000..fdd07fd45
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_assignment.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <group>
+        <clip-path android:pathData="M0,0h16v16h-16z" />
+        <path
+            android:fillColor="#19212F"
+            android:pathData="M3.333,15.8C2.967,15.8 2.653,15.67 2.392,15.409C2.131,15.148 2,14.834 2,14.467V5.134C2,4.767 2.131,4.453 2.392,4.192C2.653,3.931 2.967,3.801 3.333,3.801H9.283L7.95,5.134H3.333V14.467H12.667V9.834L14,8.501V14.467C14,14.834 13.869,15.148 13.608,15.409C13.347,15.67 13.033,15.8 12.667,15.8H3.333ZM10.783,4.184L11.733,5.117L7.333,9.517V10.467H8.267L12.683,6.051L13.633,6.984L8.833,11.8H6V8.967L10.783,4.184ZM13.633,6.984L10.783,4.184L12.45,2.517C12.717,2.251 13.036,2.117 13.408,2.117C13.781,2.117 14.094,2.251 14.35,2.517L15.283,3.467C15.539,3.723 15.667,4.034 15.667,4.401C15.667,4.767 15.539,5.078 15.283,5.334L13.633,6.984Z" />
+    </group>
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_back.xml b/core/src/main/res/drawable/core_ic_back.xml
index 14528269e..912dc1200 100644
--- a/core/src/main/res/drawable/core_ic_back.xml
+++ b/core/src/main/res/drawable/core_ic_back.xml
@@ -11,21 +11,21 @@
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
-        android:strokeColor="#19212F"
+        android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
     <path
         android:pathData="M11,18L5,12"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
-        android:strokeColor="#19212F"
+        android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
     <path
         android:pathData="M11,6L5,12"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
-        android:strokeColor="#19212F"
+        android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
   </group>
 </vector>
diff --git a/core/src/main/res/drawable/core_ic_calendar.xml b/core/src/main/res/drawable/core_ic_calendar.xml
new file mode 100644
index 000000000..8dcd8c896
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_calendar.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <path
+        android:fillColor="#19212F"
+        android:pathData="M11.333,1.334C10.967,1.334 10.667,1.634 10.667,2.001V2.667H5.333V2.001C5.333,1.634 5.033,1.334 4.667,1.334C4.3,1.334 4,1.634 4,2.001V2.667H3.333C2.593,2.667 2.007,3.267 2.007,4.001L2,13.334C2,14.067 2.593,14.667 3.333,14.667H12.667C13.4,14.667 14,14.067 14,13.334V4.001C14,3.267 13.4,2.667 12.667,2.667H12V2.001C12,1.634 11.7,1.334 11.333,1.334ZM12.667,13.334H3.333V6.667H12.667V13.334ZM7.333,8.667C7.333,8.301 7.633,8.001 8,8.001C8.367,8.001 8.667,8.301 8.667,8.667C8.667,9.034 8.367,9.334 8,9.334C7.633,9.334 7.333,9.034 7.333,8.667ZM4.667,8.667C4.667,8.301 4.967,8.001 5.333,8.001C5.7,8.001 6,8.301 6,8.667C6,9.034 5.7,9.334 5.333,9.334C4.967,9.334 4.667,9.034 4.667,8.667ZM10,8.667C10,8.301 10.3,8.001 10.667,8.001C11.033,8.001 11.333,8.301 11.333,8.667C11.333,9.034 11.033,9.334 10.667,9.334C10.3,9.334 10,9.034 10,8.667ZM7.333,11.334C7.333,10.967 7.633,10.667 8,10.667C8.367,10.667 8.667,10.967 8.667,11.334C8.667,11.701 8.367,12.001 8,12.001C7.633,12.001 7.333,11.701 7.333,11.334ZM4.667,11.334C4.667,10.967 4.967,10.667 5.333,10.667C5.7,10.667 6,10.967 6,11.334C6,11.701 5.7,12.001 5.333,12.001C4.967,12.001 4.667,11.701 4.667,11.334ZM10,11.334C10,10.967 10.3,10.667 10.667,10.667C11.033,10.667 11.333,10.967 11.333,11.334C11.333,11.701 11.033,12.001 10.667,12.001C10.3,12.001 10,11.701 10,11.334Z" />
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_certificate.xml b/core/src/main/res/drawable/core_ic_certificate.xml
new file mode 100644
index 000000000..c090f12e3
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_certificate.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="17dp"
+    android:viewportWidth="16"
+    android:viewportHeight="17">
+    <path
+        android:fillColor="#19212F"
+        android:pathData="M15.334,8.578L13.707,6.718L13.934,4.258L11.527,3.711L10.267,1.578L8,2.551L5.734,1.578L4.474,3.705L2.067,4.245L2.294,6.711L0.667,8.578L2.294,10.438L2.067,12.905L4.474,13.451L5.734,15.578L8,14.598L10.267,15.571L11.527,13.445L13.934,12.898L13.707,10.438L15.334,8.578ZM6.254,11.252L4.667,9.651C4.407,9.391 4.407,8.971 4.667,8.711L4.714,8.665C4.974,8.405 5.4,8.405 5.66,8.665L6.734,9.745L10.167,6.305C10.427,6.045 10.854,6.045 11.114,6.305L11.16,6.351C11.42,6.611 11.42,7.031 11.16,7.291L7.214,11.252C6.94,11.512 6.52,11.512 6.254,11.252Z" />
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_check.xml b/core/src/main/res/drawable/core_ic_check.xml
index 6602a321d..81badcbcd 100644
--- a/core/src/main/res/drawable/core_ic_check.xml
+++ b/core/src/main/res/drawable/core_ic_check.xml
@@ -1,17 +1,13 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-  <group>
-    <clip-path
-        android:pathData="M0,0h24v24h-24z"/>
-    <path
-        android:pathData="M9,11L12,14L20,6M20,12V18C20,18.53 19.789,19.039 19.414,19.414C19.039,19.789 18.53,20 18,20H6C5.47,20 4.961,19.789 4.586,19.414C4.211,19.039 4,18.53 4,18V6C4,5.47 4.211,4.961 4.586,4.586C4.961,4.211 5.47,4 6,4H15"
-        android:strokeLineJoin="round"
-        android:strokeWidth="1.75"
-        android:fillColor="#00000000"
-        android:strokeColor="#ffffff"
-        android:strokeLineCap="round"/>
-  </group>
+    android:width="18dp"
+    android:height="12dp"
+    android:viewportWidth="18"
+    android:viewportHeight="12">
+  <path
+      android:pathData="M1.5,6L6.5,11L16.5,1"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.75"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
 </vector>
diff --git a/core/src/main/res/drawable/core_ic_check_in_box.xml b/core/src/main/res/drawable/core_ic_check_in_box.xml
new file mode 100644
index 000000000..6602a321d
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_check_in_box.xml
@@ -0,0 +1,17 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M0,0h24v24h-24z"/>
+    <path
+        android:pathData="M9,11L12,14L20,6M20,12V18C20,18.53 19.789,19.039 19.414,19.414C19.039,19.789 18.53,20 18,20H6C5.47,20 4.961,19.789 4.586,19.414C4.211,19.039 4,18.53 4,18V6C4,5.47 4.211,4.961 4.586,4.586C4.961,4.211 5.47,4 6,4H15"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.75"
+        android:fillColor="#00000000"
+        android:strokeColor="#ffffff"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_course_expire.xml b/core/src/main/res/drawable/core_ic_course_expire.xml
new file mode 100644
index 000000000..f9e6a11ad
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_course_expire.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <path
+        android:fillColor="#19212F"
+        android:pathData="M11,7.333C11.467,7.333 11.914,7.399 12.334,7.526V6.666C12.334,5.933 11.734,5.333 11,5.333H10.334V3.999C10.334,2.159 8.84,0.666 7,0.666C5.16,0.666 3.667,2.159 3.667,3.999V5.333H3C2.267,5.333 1.667,5.933 1.667,6.666V13.333C1.667,14.066 2.267,14.666 3,14.666H7.174C6.647,13.913 6.334,12.993 6.334,11.999C6.334,9.419 8.42,7.333 11,7.333ZM5,3.999C5,2.893 5.894,1.999 7,1.999C8.107,1.999 9,2.893 9,3.999V5.333H5V3.999Z" />
+    <path
+        android:fillColor="#19212F"
+        android:pathData="M11,8.666C9.16,8.666 7.667,10.159 7.667,11.999C7.667,13.839 9.16,15.333 11,15.333C12.84,15.333 14.334,13.839 14.334,11.999C14.334,10.159 12.84,8.666 11,8.666ZM12.334,13.333C12.2,13.466 11.994,13.466 11.86,13.333L10.76,12.233C10.7,12.173 10.66,12.086 10.66,11.999V10.333C10.66,10.146 10.807,9.999 10.994,9.999C11.18,9.999 11.327,10.146 11.327,10.333V11.859L12.327,12.859C12.467,12.993 12.467,13.199 12.334,13.333Z" />
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_heart.xml b/core/src/main/res/drawable/core_ic_heart.xml
new file mode 100644
index 000000000..63af69c53
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_heart.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="101dp"
+    android:height="100dp"
+    android:viewportWidth="101"
+    android:viewportHeight="100">
+  <path
+      android:pathData="M69.25,20.83C62.83,20.83 56.58,24.96 54.42,30.67H46.62C44.42,24.96 38.17,20.83 31.75,20.83C23.42,20.83 17.17,27.08 17.17,35.42C17.17,47.46 30.25,59.33 50.08,77.29L50.5,77.71L50.92,77.29C70.75,59.33 83.83,47.46 83.83,35.42C83.83,27.08 77.58,20.83 69.25,20.83Z"
+      android:strokeAlpha="0.3"
+      android:fillColor="#97A5BB"
+      android:fillAlpha="0.3"/>
+  <path
+      android:pathData="M69.25,12.5C62,12.5 55.04,15.88 50.5,21.21C45.96,15.88 39,12.5 31.75,12.5C18.92,12.5 8.83,22.58 8.83,35.42C8.83,51.17 23,64 44.46,83.5L50.5,88.96L56.54,83.46C78,64 92.17,51.17 92.17,35.42C92.17,22.58 82.08,12.5 69.25,12.5ZM50.92,77.29L50.5,77.71L50.08,77.29C30.25,59.33 17.17,47.46 17.17,35.42C17.17,27.08 23.42,20.83 31.75,20.83C38.17,20.83 44.42,24.96 46.63,30.67H54.42C56.58,24.96 62.83,20.83 69.25,20.83C77.58,20.83 83.83,27.08 83.83,35.42C83.83,47.46 70.75,59.33 50.92,77.29Z"
+      android:fillColor="#97A5BB"/>
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_icon_upgrade.xml b/core/src/main/res/drawable/core_ic_icon_upgrade.xml
new file mode 100644
index 000000000..6e3ffa576
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_icon_upgrade.xml
@@ -0,0 +1,32 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="111dp"
+    android:height="111dp"
+    android:viewportWidth="111"
+    android:viewportHeight="111">
+  <path
+      android:pathData="M55.5,37L55.5,78.63"
+      android:strokeLineJoin="round"
+      android:strokeWidth="8.09375"
+      android:fillColor="#00000000"
+      android:strokeColor="#3C68FF"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M69.38,48.56L55.5,34.69"
+      android:strokeLineJoin="round"
+      android:strokeWidth="8.09375"
+      android:fillColor="#00000000"
+      android:strokeColor="#3C68FF"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M41.63,48.56L55.5,34.69"
+      android:strokeLineJoin="round"
+      android:strokeWidth="8.09375"
+      android:fillColor="#00000000"
+      android:strokeColor="#3C68FF"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M55,55m-46.25,0a46.25,46.25 0,1 1,92.5 0a46.25,46.25 0,1 1,-92.5 0"
+      android:strokeWidth="8.09375"
+      android:fillColor="#00000000"
+      android:strokeColor="#3C68FF"/>
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_lock.xml b/core/src/main/res/drawable/core_ic_lock.xml
new file mode 100644
index 000000000..d0e0ba4c7
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_lock.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <path
+        android:fillColor="#19212F"
+        android:pathData="M12,5.667H11.334V4.333C11.334,2.493 9.84,1 8,1C6.16,1 4.667,2.493 4.667,4.333V5.667H4C3.267,5.667 2.667,6.267 2.667,7V13.667C2.667,14.4 3.267,15 4,15H12C12.734,15 13.334,14.4 13.334,13.667V7C13.334,6.267 12.734,5.667 12,5.667ZM8,11.667C7.267,11.667 6.667,11.067 6.667,10.333C6.667,9.6 7.267,9 8,9C8.734,9 9.334,9.6 9.334,10.333C9.334,11.067 8.734,11.667 8,11.667ZM6,5.667V4.333C6,3.227 6.894,2.333 8,2.333C9.107,2.333 10,3.227 10,4.333V5.667H6Z" />
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_start_end.xml b/core/src/main/res/drawable/core_ic_start_end.xml
new file mode 100644
index 000000000..6cf542287
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_start_end.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="17dp"
+    android:viewportWidth="16"
+    android:viewportHeight="17">
+    <path
+        android:fillColor="#19212F"
+        android:pathData="M2.97,9.362V11.235C2.97,11.722 3.236,12.175 3.663,12.408L6.996,14.228C7.396,14.448 7.876,14.448 8.276,14.228L11.61,12.408C12.036,12.175 12.303,11.722 12.303,11.235V9.362L8.276,11.562C7.876,11.782 7.396,11.782 6.996,11.562L2.97,9.362ZM6.996,2.922L1.376,5.988C0.916,6.242 0.916,6.908 1.376,7.162L6.996,10.228C7.396,10.448 7.876,10.448 8.276,10.228L13.636,7.302V11.242C13.636,11.608 13.936,11.908 14.303,11.908C14.67,11.908 14.97,11.608 14.97,11.242V6.968C14.97,6.722 14.836,6.502 14.623,6.382L8.276,2.922C7.876,2.708 7.396,2.708 6.996,2.922Z" />
+</vector>
diff --git a/core/src/main/res/drawable/core_ic_warning.xml b/core/src/main/res/drawable/core_ic_warning.xml
new file mode 100644
index 000000000..7270dc5a9
--- /dev/null
+++ b/core/src/main/res/drawable/core_ic_warning.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="111dp"
+    android:height="112dp"
+    android:viewportWidth="111"
+    android:viewportHeight="112">
+  <path
+      android:pathData="M55.5,9.75L4.63,97.63H106.38L55.5,9.75Z"
+      android:fillColor="#FFC94D"/>
+  <path
+      android:pathData="M60.13,74.5H50.88V83.75H60.13V74.5Z"
+      android:fillColor="#111111"/>
+  <path
+      android:pathData="M60.13,46.75H50.88V65.25H60.13V46.75Z"
+      android:fillColor="#111111"/>
+</vector>
diff --git a/core/src/main/res/font/black.ttf b/core/src/main/res/font/black.ttf
new file mode 100644
index 000000000..5aecf7dc4
Binary files /dev/null and b/core/src/main/res/font/black.ttf differ
diff --git a/core/src/main/res/font/bold.ttf b/core/src/main/res/font/bold.ttf
new file mode 100644
index 000000000..8e82c70d1
Binary files /dev/null and b/core/src/main/res/font/bold.ttf differ
diff --git a/core/src/main/res/font/extra_bold.ttf b/core/src/main/res/font/extra_bold.ttf
new file mode 100644
index 000000000..cb4b8217f
Binary files /dev/null and b/core/src/main/res/font/extra_bold.ttf differ
diff --git a/core/src/main/res/font/extra_light.ttf b/core/src/main/res/font/extra_light.ttf
new file mode 100644
index 000000000..64aee30a4
Binary files /dev/null and b/core/src/main/res/font/extra_light.ttf differ
diff --git a/core/src/main/res/font/font.xml b/core/src/main/res/font/font.xml
new file mode 100644
index 000000000..4cdad3af5
--- /dev/null
+++ b/core/src/main/res/font/font.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:android="http://schemas.android.com/apk/res/android">
+    <font
+        android:font="@font/black"
+        android:fontStyle="normal"
+        android:fontWeight="700" />
+
+    <font
+        android:font="@font/bold"
+        android:fontStyle="normal"
+        android:fontWeight="600" />
+
+    <font
+        android:font="@font/extra_bold"
+        android:fontStyle="normal"
+        android:fontWeight="800" />
+
+    <font
+        android:font="@font/extra_light"
+        android:fontStyle="normal"
+        android:fontWeight="300" />
+
+    <font
+        android:font="@font/light"
+        android:fontStyle="normal"
+        android:fontWeight="500" />
+
+    <font
+        android:font="@font/medium"
+        android:fontStyle="normal"
+        android:fontWeight="400" />
+
+    <font
+        android:font="@font/regular"
+        android:fontStyle="normal"
+        android:fontWeight="600" />
+
+    <font
+        android:font="@font/semi_bold"
+        android:fontStyle="normal"
+        android:fontWeight="700" />
+
+    <font
+        android:font="@font/thin"
+        android:fontStyle="normal"
+        android:fontWeight="300" />
+
+</font-family>
diff --git a/core/src/main/res/font/light.ttf b/core/src/main/res/font/light.ttf
new file mode 100644
index 000000000..9e265d890
Binary files /dev/null and b/core/src/main/res/font/light.ttf differ
diff --git a/core/src/main/res/font/medium.ttf b/core/src/main/res/font/medium.ttf
new file mode 100644
index 000000000..b53fb1c4a
Binary files /dev/null and b/core/src/main/res/font/medium.ttf differ
diff --git a/core/src/main/res/font/regular.ttf b/core/src/main/res/font/regular.ttf
new file mode 100644
index 000000000..8d4eebf20
Binary files /dev/null and b/core/src/main/res/font/regular.ttf differ
diff --git a/core/src/main/res/font/semi_bold.ttf b/core/src/main/res/font/semi_bold.ttf
new file mode 100644
index 000000000..c6aeeb16a
Binary files /dev/null and b/core/src/main/res/font/semi_bold.ttf differ
diff --git a/core/src/main/res/font/thin.ttf b/core/src/main/res/font/thin.ttf
new file mode 100644
index 000000000..7aed55d56
Binary files /dev/null and b/core/src/main/res/font/thin.ttf differ
diff --git a/core/src/main/res/values-uk/strings.xml b/core/src/main/res/values-uk/strings.xml
index 8de28cc5b..827211c40 100644
--- a/core/src/main/res/values-uk/strings.xml
+++ b/core/src/main/res/values-uk/strings.xml
@@ -21,7 +21,7 @@
     <string name="core_password">Пароль</string>
     <string name="core_assessment_soon">незабаром</string>
     <string name="auto_recommended_text">Авто (Рекомендовано)</string>
-    <string name="video_quality_p360">360p (Найменший розмір)</string>
+    <string name="video_quality_p360">360p (Менше використання трафіку)</string>
     <string name="video_quality_p540">540p</string>
     <string name="video_quality_p720">720p (Найкраща якість)</string>
     <string name="core_offline">Офлайн</string>
@@ -31,13 +31,38 @@
     <string name="core_user_not_active">Обліковий запис користувача не активовано. Будь ласка, спочатку активуйте свій обліковий запис.</string>
     <string name="core_email_chooser_header">Надіслати електронний лист за допомогою ...</string>
     <string name="core_email_client_not_present">Не встановлено жодного поштового клієнта</string>
-    <string name="core_app_version">Версія додатку: </string>
-    <string name="core_android_os_version">Android OS: </string>
-    <string name="core_android_device_model">Модель пристрою: </string>
-    <string name="core_insert_feedback">Відгук: </string>
-    <string name="core_email_subject">Відгук клієнта</string>
-
     <string name="core_date_format_MMMM_dd">dd MMMM</string>
     <string name="core_full_date_with_time">dd MMM yyyy HH:mm</string>
+    <string name="core_app_upgrade_title">Оновлення додатку</string>
+    <string name="core_app_upgrade_dialog_description">Ми рекомендуємо вам оновитись до останньої версії. Оновіться зараз, щоб отримати останні функції та виправлення.</string>
+    <string name="core_app_upgrade_box_description">Доступне нове оновлення! Оновіть зараз, щоб отримати останні можливості та виправлення</string>
+    <string name="core_not_now">Не зараз</string>
+    <string name="core_update">Оновити</string>
+    <string name="core_deprecated_app_version">Застаріла версія додатку</string>
+    <string name="core_account_settings">Налаштування аккаунту</string>
+    <string name="core_app_update_required_title">Необхідне оновлення додатку</string>
+    <string name="core_app_update_required_description">Ця версія додатка %1$s застаріла. Щоб продовжити навчання та отримати останні можливості та виправлення, будь ласка, оновіть до останньої версії.</string>
+    <string name="core_why_do_you_need_update">Чому мені потрібно оновити?</string>
+    <string name="core_version">Версія: %1$s</string>
+    <string name="core_up_to_date">Оновлено</string>
+    <string name="core_tap_to_update_to_version">Натисніть, щоб оновити до версії %1$s</string>
+    <string name="core_tap_to_install_required_app_update">Натисніть, щоб встановити обов\'язкове оновлення додатку</string>
+    <string name="core_submit">Підтвердити</string>
+    <string name="core_rate_dialog_title">Вам подобається %1$s?</string>
+    <string name="core_rate_dialog_description">Ваш відгук має значення для нас. Будь ласка, оцініть додаток, натиснувши на зірочку нижче. Дякуємо за вашу підтримку!</string>
+    <string name="core_feedback_dialog_title">Залиште відгук</string>
+    <string name="core_feedback_dialog_description">Нам шкода, що ваш досвід навчання був з деякими проблемами. Ми цінуємо всі відгуки.</string>
+    <string name="core_feedback_dialog_textfield_hint">Що могло б бути краще?</string>
+    <string name="core_share_feedback">Поділитися відгуком</string>
+    <string name="core_thank_you">Дякуємо</string>
+    <string name="core_rate_us">Оцінити нас</string>
+    <string name="core_thank_you_dialog_positive_description">Дякуємо за надання відгуку. Чи бажаєте ви поділитися своєю оцінкою цього додатка з іншими користувачами в магазині додатків?</string>
+    <string name="core_thank_you_dialog_negative_description">Ми отримали ваш відгук і використовуватимемо його, щоб покращити ваш досвід навчання в майбутньому. Дякуємо, що поділилися!</string>
+    <string name="core_not_connected_to_internet">Ви не підключені до Інтернету. Будь ласка, перевірте ваше підключення до Інтернету.</string>
+
+    <string name="core_register">Зареєструватися</string>
+    <string name="core_sign_in">Увійти</string>
 
-</resources>
\ No newline at end of file
+    <!--    Accessibility-->
+    <string name="core_accessibility_user_profile_image">%1$s зображення профілю</string>
+</resources>
diff --git a/core/src/main/res/values/strings.xml b/core/src/main/res/values/strings.xml
index 6c2620495..6b77b5b11 100644
--- a/core/src/main/res/values/strings.xml
+++ b/core/src/main/res/values/strings.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <string name="app_name" translatable="false">OpenEdX</string>
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <string name="app_name" translatable="false">@string/platform_name</string>
 
     <string name="core_results">Results</string>
     <string name="core_error_invalid_grant">Invalid credentials</string>
@@ -8,6 +8,9 @@
     <string name="core_error_unknown_error">Something went wrong</string>
     <string name="core_error_try_again">Try again</string>
     <string name="core_privacy_policy">Privacy policy</string>
+    <string name="core_cookie_policy" translatable="false">Cookie policy</string>
+    <string name="core_data_sell" translatable="false">Do not sell my personal information</string>
+    <string name="core_faq" translatable="false">View FAQ</string>
     <string name="core_terms_of_use">Terms of use</string>
     <string name="core_profile">Profile</string>
     <string name="core_cancel">Cancel</string>
@@ -27,18 +30,83 @@
     <string name="core_reload">Reload</string>
     <string name="core_downloading_in_progress">Downloading in progress</string>
     <string name="auto_recommended_text">Auto (Recommended)</string>
-    <string name="video_quality_p360">360p (Smallest file size)</string>
+    <string name="video_quality_p360">360p (Lower data usage)</string>
     <string name="video_quality_p540">540p</string>
     <string name="video_quality_p720">720p (Best quality)</string>
     <string name="core_user_not_active">User account is not activated. Please activate your account first.</string>
-    <string name="core_email_chooser_header">Send email using...</string>
+    <string name="core_email_chooser_header">Send email using…</string>
     <string name="core_email_client_not_present">No e-mail clients installed</string>
-    <string name="core_app_version">App Version: </string>
-    <string name="core_android_os_version">Android OS: </string>
-    <string name="core_android_device_model">Device Model: </string>
-    <string name="core_insert_feedback">Feedback: </string>
-    <string name="core_email_subject">Customer Feedback</string>
-
+    <string name="core_app_version" translatable="false">App version: </string>
+    <string name="core_android_os_version" translatable="false">OS version: </string>
+    <string name="core_android_device_model" translatable="false">Device model: </string>
+    <string name="core_email_subject" translatable="false">Feedback</string>
     <string name="core_date_format_MMMM_dd">MMMM dd</string>
     <string name="core_full_date_with_time">dd MMM yyyy hh:mm aaa</string>
-</resources>
\ No newline at end of file
+    <string name="core_app_upgrade_title">App Update</string>
+    <string name="core_app_upgrade_dialog_description">We recommend that you update to the latest version. Upgrade now to receive the latest features and fixes.</string>
+    <string name="core_app_upgrade_box_description">New update available! Upgrade now to receive the latest features and fixes</string>
+    <string name="core_not_now">Not Now</string>
+    <string name="core_update">Update</string>
+    <string name="core_deprecated_app_version">Deprecated App Version</string>
+    <string name="core_account_settings">Account Settings</string>
+    <string name="core_app_update_required_title">App Update Required</string>
+    <string name="core_app_update_required_description">This version of the OpenEdX app is out-of-date. To continue learning and get the latest features and fixes, please upgrade to the latest version.</string>
+    <string name="core_why_do_you_need_update">Why do I need to update?</string>
+    <string name="core_version">Version: %1$s</string>
+    <string name="core_up_to_date">Up-to-date</string>
+    <string name="core_tap_to_update_to_version">Tap to update to version %1$s</string>
+    <string name="core_tap_to_install_required_app_update">Tap to install required app update</string>
+    <string name="core_submit">Submit</string>
+    <string name="core_rate_dialog_title">Enjoying %1$s?</string>
+    <string name="core_rate_dialog_description">Your feedback matters to us. Would you take a moment to rate the app by tapping a star below? Thanks for your support!</string>
+    <string name="core_feedback_dialog_title">Leave Us Feedback</string>
+    <string name="core_feedback_dialog_description">We’re sorry to hear your learning experience has had some issues. We appreciate all feedback.</string>
+    <string name="core_feedback_dialog_textfield_hint">What could have been better?</string>
+    <string name="core_share_feedback">Share Feedback</string>
+    <string name="core_thank_you">Thank You</string>
+    <string name="core_rate_us">Rate Us</string>
+    <string name="core_thank_you_dialog_positive_description">Thank you for sharing your feedback with us. Would you like to share your review of this app with other users on the app store?</string>
+    <string name="core_thank_you_dialog_negative_description">We received your feedback and will use it to help improve your learning experience going forward. Thank you for sharing!</string>
+    <string name="core_not_connected_to_internet">You are not connected to the Internet. Please check your Internet connection.</string>
+    <string name="core_ok" tools:ignore="MissingTranslation">OK</string>
+    <string name="core_continue" tools:ignore="MissingTranslation">Continue</string>
+    <string name="core_leaving_the_app" tools:ignore="MissingTranslation">Leaving the app</string>
+    <string name="core_leaving_the_app_message" tools:ignore="MissingTranslation">You are now leaving the %s app and opening a browser.</string>
+    <string name="core_enrollment_error" tools:ignore="MissingTranslation">Enrollment Error</string>
+    <string name="core_enrollment_error_message" tools:ignore="MissingTranslation">We are unable to enroll you in this course at this time using the %s mobile application. Please try again on your web browser.</string>
+
+
+    <!-- region: Course Date Sections -->
+    <string name="core_date_type_completed" tools:ignore="MissingTranslation">Completed</string>
+    <string name="core_date_type_past_due" tools:ignore="MissingTranslation">Past Due</string>
+    <string name="core_date_type_today" tools:ignore="MissingTranslation">Today</string>
+    <string name="core_date_type_this_week" tools:ignore="MissingTranslation">This Week</string>
+    <string name="core_date_type_next_week" tools:ignore="MissingTranslation">Next Week</string>
+    <string name="core_date_type_upcoming" tools:ignore="MissingTranslation">Upcoming</string>
+    <string name="core_date_type_none" tools:ignore="MissingTranslation">None</string>
+    <string name="core_date_format_today" tools:ignore="MissingTranslation">Today</string>
+    <string name="core_date_format_tomorrow" tools:ignore="MissingTranslation">Tomorrow</string>
+    <string name="core_date_format_yesterday" tools:ignore="MissingTranslation">Yesterday</string>
+    <string name="core_date_format_days_ago" tools:ignore="MissingTranslation">%1$s days ago</string>
+    <plurals name="core_date_items_hidden" tools:ignore="MissingTranslation">
+        <item quantity="one">%d Item Hidden</item>
+        <item quantity="other">%d Items Hidden</item>
+    </plurals>
+
+    <!--  Course Dates Banner  -->
+    <string name="core_dates_reset_dates_banner_button" tools:ignore="MissingTranslation">Shift due dates</string>
+    <string name="core_dates_reset_dates_banner_header" tools:ignore="MissingTranslation">Missed some deadlines?</string>
+    <string name="core_dates_reset_dates_banner_body" tools:ignore="MissingTranslation">Don\'t worry - shift our suggested schedule to complete past due assignments without losing any progress.</string>
+    <string name="core_dates_info_banner_body" tools:ignore="MissingTranslation">We built a suggested schedule to help you stay on track. But don’t worry – it’s flexible so you can learn at your own pace. If you happen to fall behind, you’ll be able to adjust the dates to keep yourself on track.</string>
+    <string name="core_dates_upgrade_to_graded_banner_body" tools:ignore="MissingTranslation">To complete graded assignments as part of this course, you can upgrade today.</string>
+    <string name="core_dates_upgrade_to_reset_banner_body" tools:ignore="MissingTranslation">You are auditing this course, which means that you are unable to participate in graded assignments. It looks like you missed some important deadlines based on our suggested schedule. To complete graded assignments as part of this course and shift the past due assignments into the future, you can upgrade today.</string>
+    <string name="core_dates_shift_dates_successfully_msg" tools:ignore="MissingTranslation">Your due dates have been successfully shifted to help you stay on track.</string>
+    <string name="core_dates_shift_dates_unsuccessful_msg" tools:ignore="MissingTranslation">Your dates could not be shifted. Please try again.</string>
+    <string name="core_dates_view_all_dates" tools:ignore="MissingTranslation"><u>View all dates</u></string>
+
+    <string name="core_register">Register</string>
+    <string name="core_sign_in">Sign in</string>
+
+    <!--    Accessibility-->
+    <string name="core_accessibility_user_profile_image">%1$s profile image</string>
+</resources>
diff --git a/core/src/main/res/values/themes.xml b/core/src/main/res/values/themes.xml
index f0e209956..e6859e022 100644
--- a/core/src/main/res/values/themes.xml
+++ b/core/src/main/res/values/themes.xml
@@ -12,6 +12,7 @@
         <!-- Status bar color. -->
         <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
         <!-- Customize your theme here. -->
+        <item name="android:navigationBarColor">@android:color/transparent</item>
     </style>
 
     <style name="Theme.OpenEdX.NoActionBar">
diff --git a/core/src/openedx/org/openedx/core/ui/theme/Colors.kt b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt
new file mode 100644
index 000000000..856e7c7d7
--- /dev/null
+++ b/core/src/openedx/org/openedx/core/ui/theme/Colors.kt
@@ -0,0 +1,98 @@
+package org.openedx.core.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val light_primary = Color(0xFF3C68FF)
+val light_primary_variant = Color(0x9ADEFAFF)
+val light_secondary = Color(0xFF94D3DD)
+val light_secondary_variant = Color(0xFF94D3DD)
+val light_background = Color.White
+val light_surface = Color(0xFFF7F7F8)
+val light_error = Color(0xFFFF3D71)
+val light_onPrimary = Color.White
+val light_onSecondary = Color.Black
+val light_onBackground = Color.Black
+val light_onSurface = Color.Black
+val light_onError = Color.White
+val light_text_primary = Color(0xFF212121)
+val light_text_primary_variant = Color(0xFF3D4964)
+val light_text_secondary = Color(0xFFB3B3B3)
+val light_text_dark = Color(0xFF19212F)
+val light_text_accent = Color(0xFF3C68FF)
+val light_text_field_background = Color(0xFFF7F7F8)
+val light_text_field_background_variant = Color.White
+val light_text_field_border = Color(0xFF97A5BB)
+val light_text_field_text = Color(0xFF3D4964)
+val light_text_field_hint = Color(0xFF97A5BB)
+val light_button_background = Color(0xFF3C68FF)
+val light_button_secondary_background = Color(0xFF79889F)
+val light_button_text = Color.White
+val light_card_view_background = Color(0xFFF9FAFB)
+val light_card_view_border = Color(0xFFCCD4E0)
+val light_divider = Color(0xFFCCD4E0)
+val light_certificate_foreground = Color(0xD94BD191)
+val light_bottom_sheet_toggle = Color(0xFF4E5A70)
+val light_warning = Color(0xFFFFC94D)
+val light_info = Color(0xFF42AAFF)
+val light_rate_stars = Color(0xFFFFC94D)
+val light_inactive_button_background = Color(0xFFCCD4E0)
+val light_inactive_button_text = Color(0xFF3D4964)
+val light_access_green = Color(0xFF23BCA0)
+val light_dates_section_bar_past_due = light_warning
+val light_dates_section_bar_today = light_info
+val light_dates_section_bar_this_week = light_text_primary_variant
+val light_dates_section_bar_next_week = light_text_field_border
+val light_dates_section_bar_upcoming = Color(0xFFCCD4E0)
+val light_auth_facebook_button_background = Color(0xFF0866FF)
+val light_auth_microsoft_button_background = Color(0xFA000000)
+val light_component_horizontal_progress_completed = Color(0xFF2EA171)
+val light_component_horizontal_progress_selected = Color(0xFFF0CB00)
+val light_component_horizontal_progress_default = Color(0xFFD6D3D1)
+
+
+val dark_primary = Color(0xFF5478F9)
+val dark_primary_variant = Color(0xFF3700B3)
+val dark_secondary = Color(0xFF03DAC6)
+val dark_secondary_variant = Color(0xFF373E4F)
+val dark_background = Color(0xFF19212F)
+val dark_surface = Color(0xFF273346)
+val dark_error = Color(0xFFFF3D71)
+val dark_onPrimary = Color.Black
+val dark_onSecondary = Color.Black
+val dark_onBackground = Color.White
+val dark_onSurface = Color.White
+val dark_onError = Color.Black
+val dark_text_primary = Color.White
+val dark_text_primary_variant = Color(0xFF79889F)
+val dark_text_secondary = Color(0xFFB3B3B3)
+val dark_text_dark = Color.White
+val dark_text_accent = Color(0xFF879FF5)
+val dark_text_field_background = Color(0xFF273346)
+val dark_text_field_background_variant = Color(0xFF273346)
+val dark_text_field_border = Color(0xFF4E5A70)
+val dark_text_field_text = Color.White
+val dark_text_field_hint = Color(0xFF79889F)
+val dark_button_background = Color(0xFF5478F9)
+val dark_button_secondary_background = Color(0xFF79889F)
+val dark_button_text = Color.White
+val dark_card_view_background = Color(0xFF273346)
+val dark_card_view_border = Color(0xFF4E5A70)
+val dark_divider = Color(0xFF4E5A70)
+val dark_certificate_foreground = Color(0xD92EB865)
+val dark_bottom_sheet_toggle = Color(0xFF4E5A70)
+val dark_warning = Color(0xFFFFC248)
+val dark_info = Color(0xFF0095FF)
+val dark_rate_stars = Color(0xFFFFC94D)
+val dark_inactive_button_background = Color(0xFFCCD4E0)
+val dark_inactive_button_text = Color(0xFF3D4964)
+val dark_access_green = Color(0xFF23BCA0)
+val dark_dates_section_bar_past_due = dark_warning
+val dark_dates_section_bar_today = dark_info
+val dark_dates_section_bar_this_week = dark_text_primary_variant
+val dark_dates_section_bar_next_week = dark_text_field_border
+val dark_dates_section_bar_upcoming = Color(0xFFCCD4E0)
+val dark_auth_facebook_button_background = Color(0xFF0866FF)
+val dark_auth_microsoft_button_background = Color(0xFA000000)
+val dark_component_horizontal_progress_completed = Color(0xFF2EA171)
+val dark_component_horizontal_progress_selected = Color(0xFFF0CB00)
+val dark_component_horizontal_progress_default = Color(0xFFD6D3D1)
diff --git a/core/src/openedx/org/openedx/core/ui/theme/LocalShapes.kt b/core/src/openedx/org/openedx/core/ui/theme/LocalShapes.kt
new file mode 100644
index 000000000..b5415bc5e
--- /dev/null
+++ b/core/src/openedx/org/openedx/core/ui/theme/LocalShapes.kt
@@ -0,0 +1,25 @@
+package org.openedx.core.ui.theme
+
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Shapes
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.unit.dp
+
+internal val LocalShapes = staticCompositionLocalOf {
+    AppShapes(
+        material = Shapes(
+            small = RoundedCornerShape(4.dp),
+            medium = RoundedCornerShape(8.dp),
+            large = RoundedCornerShape(0.dp)
+        ),
+        buttonShape = RoundedCornerShape(8.dp),
+        navigationButtonShape = RoundedCornerShape(8.dp),
+        textFieldShape = RoundedCornerShape(CornerSize(8.dp)),
+        screenBackgroundShape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp),
+        cardShape = RoundedCornerShape(12.dp),
+        screenBackgroundShapeFull = RoundedCornerShape(24.dp),
+        courseImageShape = RoundedCornerShape(8.dp),
+        dialogShape = RoundedCornerShape(24.dp)
+    )
+}
diff --git a/core/src/openedx/org/openedx/core/ui/theme/compose/LogistrationLogoView.kt b/core/src/openedx/org/openedx/core/ui/theme/compose/LogistrationLogoView.kt
new file mode 100644
index 000000000..a0a5b339c
--- /dev/null
+++ b/core/src/openedx/org/openedx/core/ui/theme/compose/LogistrationLogoView.kt
@@ -0,0 +1,35 @@
+package org.openedx.core.ui.theme.compose
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.openedx.core.R
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+
+@Composable
+fun LogistrationLogoView() {
+    Image(
+        modifier = Modifier
+            .padding(top = 64.dp, bottom = 20.dp)
+            .wrapContentWidth(),
+        painter = painterResource(id = R.drawable.core_ic_logo),
+        contentDescription = null,
+        colorFilter = ColorFilter.tint(MaterialTheme.appColors.primary)
+    )
+}
+
+@Preview(widthDp = 375)
+@Composable
+fun LogistrationLogoViewPreview() {
+    OpenEdXTheme {
+        LogistrationLogoView()
+    }
+}
diff --git a/core/src/openedx/org/openedx/core/ui/theme/compose/SignInLogoView.kt b/core/src/openedx/org/openedx/core/ui/theme/compose/SignInLogoView.kt
new file mode 100644
index 000000000..f1f0a9d04
--- /dev/null
+++ b/core/src/openedx/org/openedx/core/ui/theme/compose/SignInLogoView.kt
@@ -0,0 +1,39 @@
+package org.openedx.core.ui.theme.compose
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.openedx.core.R
+import org.openedx.core.ui.theme.OpenEdXTheme
+
+@Composable
+fun SignInLogoView() {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight(0.2f),
+        contentAlignment = Alignment.Center
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.core_ic_logo),
+            contentDescription = null,
+            modifier = Modifier.padding(top = 20.dp)
+        )
+    }
+}
+
+@Preview(widthDp = 375, heightDp = 400)
+@Composable
+fun SignInLogoViewPreview() {
+    OpenEdXTheme {
+        SignInLogoView()
+    }
+}
diff --git a/course/build.gradle b/course/build.gradle
index f42807f81..f746f4d09 100644
--- a/course/build.gradle
+++ b/course/build.gradle
@@ -61,8 +61,11 @@ dependencies {
     implementation project(path: ':core')
     implementation project(path: ':discussion')
     implementation "com.pierfrancescosoffritti.androidyoutubeplayer:core:$youtubeplayer_version"
-    implementation "androidx.media3:media3-exoplayer:$media3"
-    implementation "androidx.media3:media3-ui:$media3"
+    implementation "androidx.media3:media3-exoplayer:$media3_version"
+    implementation "androidx.media3:media3-exoplayer-hls:$media3_version"
+    implementation "androidx.media3:media3-ui:$media3_version"
+    implementation "androidx.media3:media3-cast:$media3_version"
+    implementation "me.saket.extendedspans:extendedspans:$extented_spans_version"
 
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
diff --git a/course/src/main/assets/js_injection/completions.js b/course/src/main/assets/js_injection/completions.js
new file mode 100644
index 000000000..329de07d8
--- /dev/null
+++ b/course/src/main/assets/js_injection/completions.js
@@ -0,0 +1,8 @@
+//Injection to intercept completion state for xBlocks
+$(document).on("ajaxSuccess", function(event, request, settings) {
+    console.log("loaded url is = " + settings.url);
+    if (settings.url.includes("publish_completion") &&
+        request.responseText.includes("ok")) {
+        javascript:window.callback.completionSet();
+    }
+});
diff --git a/course/src/main/assets/js_injection/survey_css.js b/course/src/main/assets/js_injection/survey_css.js
new file mode 100644
index 000000000..051fa4167
--- /dev/null
+++ b/course/src/main/assets/js_injection/survey_css.js
@@ -0,0 +1,28 @@
+//Injection to fix CSS issues for Survey xBlock
+var css = `
+    .survey-table:not(.poll-results) .survey-option label {
+        margin-bottom: 0px !important;
+    }
+
+    .survey-table:not(.poll-results) .survey-option .visible-mobile-only {
+        width: calc(100% - 21px) !important;
+    }
+
+    .survey-table:not(.poll-results) .survey-option input {
+        width: 13px !important;
+        height: 13px !important;
+    }
+
+    .survey-percentage .percentage {
+        width: 54px !important;
+    }`;
+var head = document.head || document.getElementsByTagName('head')[0];
+var style = document.createElement('style');
+
+head.appendChild(style);
+style.type = 'text/css';
+if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+} else {
+    style.appendChild(document.createTextNode(css));
+}
diff --git a/course/src/main/java/org/openedx/course/data/repository/CourseRepository.kt b/course/src/main/java/org/openedx/course/data/repository/CourseRepository.kt
index f31d31bdf..5ddec50c0 100644
--- a/course/src/main/java/org/openedx/course/data/repository/CourseRepository.kt
+++ b/course/src/main/java/org/openedx/course/data/repository/CourseRepository.kt
@@ -1,5 +1,8 @@
 package org.openedx.course.data.repository
 
+import kotlinx.coroutines.flow.map
+import okhttp3.ResponseBody
+import org.openedx.core.ApiConstants
 import org.openedx.core.data.api.CourseApi
 import org.openedx.core.data.model.BlocksCompletionBody
 import org.openedx.core.data.model.EnrollBody
@@ -9,8 +12,6 @@ import org.openedx.core.domain.model.*
 import org.openedx.core.exception.NoCachedDataException
 import org.openedx.core.module.db.DownloadDao
 import org.openedx.course.data.storage.CourseDao
-import kotlinx.coroutines.flow.map
-import okhttp3.ResponseBody
 
 class CourseRepository(
     private val api: CourseApi,
@@ -21,7 +22,7 @@ class CourseRepository(
     private var courseStructure: CourseStructure? = null
 
     suspend fun getCourseDetail(id: String): Course {
-        val course = api.getCourseDetail(id)
+        val course = api.getCourseDetail(id, preferencesManager.user?.username)
         courseDao.updateCourseEntity(CourseEntity.createFrom(course))
         return course.mapToDomain()
     }
@@ -51,7 +52,7 @@ class CourseRepository(
     suspend fun preloadCourseStructure(courseId: String) {
         val response = api.getCourseStructure(
             "stale-if-error=0",
-            "v1",
+            "v3",
             preferencesManager.user?.username,
             courseId
         )
@@ -99,9 +100,17 @@ class CourseRepository(
         return api.markBlocksCompletion(blocksCompletionBody)
     }
 
+    suspend fun getCourseDates(courseId: String) =
+        api.getCourseDates(courseId).getCourseDatesResult()
+
+    suspend fun resetCourseDates(courseId: String) =
+        api.resetCourseDates(mapOf(ApiConstants.COURSE_KEY to courseId)).mapToDomain()
+
+    suspend fun getDatesBannerInfo(courseId: String) =
+        api.getDatesBannerInfo(courseId).mapToDomain()
+
     suspend fun getHandouts(courseId: String) = api.getHandouts(courseId).mapToDomain()
 
     suspend fun getAnnouncements(courseId: String) =
         api.getAnnouncements(courseId).map { it.mapToDomain() }
-
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/domain/interactor/CourseInteractor.kt b/course/src/main/java/org/openedx/course/domain/interactor/CourseInteractor.kt
index ac8d163ec..8b0fb0f03 100644
--- a/course/src/main/java/org/openedx/course/domain/interactor/CourseInteractor.kt
+++ b/course/src/main/java/org/openedx/course/domain/interactor/CourseInteractor.kt
@@ -3,17 +3,18 @@ package org.openedx.course.domain.interactor
 import org.openedx.core.BlockType
 import org.openedx.core.domain.model.Block
 import org.openedx.core.domain.model.CourseStructure
+import org.openedx.core.interfaces.EnrollInCourseInteractor
 import org.openedx.course.data.repository.CourseRepository
 
 class CourseInteractor(
     private val repository: CourseRepository
-) {
+) : EnrollInCourseInteractor {
 
     suspend fun getCourseDetails(id: String) = repository.getCourseDetail(id)
 
     suspend fun getCourseDetailsFromCache(id: String) = repository.getCourseDetailFromCache(id)
 
-    suspend fun enrollInACourse(id: String) {
+    override suspend fun enrollInACourse(id: String) {
         repository.enrollInACourse(courseId = id)
     }
 
@@ -71,6 +72,12 @@ class CourseInteractor(
 
     suspend fun getCourseStatus(courseId: String) = repository.getCourseStatus(courseId)
 
+    suspend fun getCourseDates(courseId: String) = repository.getCourseDates(courseId)
+
+    suspend fun resetCourseDates(courseId: String) = repository.resetCourseDates(courseId)
+
+    suspend fun getDatesBannerInfo(courseId: String) = repository.getDatesBannerInfo(courseId)
+
     suspend fun getHandouts(courseId: String) = repository.getHandouts(courseId)
 
     suspend fun getAnnouncements(courseId: String) = repository.getAnnouncements(courseId)
diff --git a/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt b/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt
index ccf2c11fa..32c48b433 100644
--- a/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt
+++ b/course/src/main/java/org/openedx/course/presentation/ChapterEndFragmentDialog.kt
@@ -1,5 +1,6 @@
 package org.openedx.course.presentation
 
+import android.content.res.Configuration
 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.graphics.Color
@@ -7,21 +8,17 @@ import android.graphics.drawable.ColorDrawable
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.Card
-import androidx.compose.material.Icon
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
 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.draw.rotate
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -30,6 +27,8 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.core.os.bundleOf
 import androidx.fragment.app.DialogFragment
+import org.openedx.core.extension.setWidthPercent
+import org.openedx.core.ui.AutoSizeText
 import org.openedx.core.ui.OpenEdXButton
 import org.openedx.core.ui.OpenEdXOutlinedButton
 import org.openedx.core.ui.TextIcon
@@ -44,6 +43,13 @@ class ChapterEndFragmentDialog : DialogFragment() {
 
     var listener: DialogListener? = null
 
+    override fun onResume() {
+        super.onResume()
+        if (resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+            setWidthPercent(66)
+        }
+    }
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -55,22 +61,51 @@ class ChapterEndFragmentDialog : DialogFragment() {
         setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
         setContent {
             OpenEdXTheme {
-                ChapterEndDialogScreen(
-                    sectionName = requireArguments().getString(ARG_SECTION_NAME) ?: "",
-                    nextSectionName = requireArguments().getString(ARG_NEXT_SECTION_NAME) ?: "",
-                    onBackButtonClick = {
-                        dismiss()
-                        listener?.onDismiss()
-                        requireActivity().supportFragmentManager.popBackStack(
-                            CourseSectionFragment::class.java.simpleName,
-                            0
-                        )
-                    },
-                    onProceedButtonClick = {
-                        dismiss()
-                        listener?.onClick(true)
-                    }
-                )
+                val configuration = LocalConfiguration.current
+                if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
+                    ChapterEndDialogScreen(
+                        sectionName = requireArguments().getString(ARG_SECTION_NAME) ?: "",
+                        nextSectionName = requireArguments().getString(ARG_NEXT_SECTION_NAME) ?: "",
+                        isVerticalNavigation = requireArguments().getBoolean(
+                            ARG_IS_VERTICAL_NAVIGATION
+                        ),
+                        onBackButtonClick = {
+                            dismiss()
+                            listener?.onDismiss()
+                            requireActivity().supportFragmentManager.popBackStack(
+                                CourseSectionFragment::class.java.simpleName,
+                                0
+                            )
+                        },
+                        onProceedButtonClick = {
+                            dismiss()
+                            listener?.onClick(true)
+                        },
+                        onCancelButtonClick = {
+                            dismiss()
+                        }
+                    )
+                } else {
+                    ChapterEndDialogScreenLandscape(
+                        sectionName = requireArguments().getString(ARG_SECTION_NAME) ?: "",
+                        nextSectionName = requireArguments().getString(ARG_NEXT_SECTION_NAME) ?: "",
+                        onBackButtonClick = {
+                            dismiss()
+                            listener?.onDismiss()
+                            requireActivity().supportFragmentManager.popBackStack(
+                                CourseSectionFragment::class.java.simpleName,
+                                0
+                            )
+                        },
+                        onProceedButtonClick = {
+                            dismiss()
+                            listener?.onClick(true)
+                        },
+                        onCancelButtonClick = {
+                            dismiss()
+                        }
+                    )
+                }
             }
         }
     }
@@ -78,14 +113,17 @@ class ChapterEndFragmentDialog : DialogFragment() {
     companion object {
         private const val ARG_SECTION_NAME = "sectionName"
         private const val ARG_NEXT_SECTION_NAME = "nexSectionName"
+        private const val ARG_IS_VERTICAL_NAVIGATION = "isVerticalNavigation"
         fun newInstance(
             sectionName: String,
-            nextSectionName: String
+            nextSectionName: String,
+            isVerticalNavigation: Boolean
         ): ChapterEndFragmentDialog {
             val dialog = ChapterEndFragmentDialog()
             dialog.arguments = bundleOf(
                 ARG_SECTION_NAME to sectionName,
-                ARG_NEXT_SECTION_NAME to nextSectionName
+                ARG_NEXT_SECTION_NAME to nextSectionName,
+                ARG_IS_VERTICAL_NAVIGATION to isVerticalNavigation
             )
             return dialog
         }
@@ -101,8 +139,10 @@ interface DialogListener {
 private fun ChapterEndDialogScreen(
     sectionName: String,
     nextSectionName: String,
+    isVerticalNavigation: Boolean,
     onBackButtonClick: () -> Unit,
-    onProceedButtonClick: () -> Unit
+    onProceedButtonClick: () -> Unit,
+    onCancelButtonClick: () -> Unit
 ) {
     Card(
         modifier = Modifier
@@ -112,11 +152,24 @@ private fun ChapterEndDialogScreen(
         shape = MaterialTheme.appShapes.courseImageShape
     ) {
         Column(
-            Modifier
-                .padding(horizontal = 40.dp)
-                .padding(top = 48.dp, bottom = 38.dp),
+            modifier = Modifier.padding(30.dp),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
+            Box(
+                contentAlignment = Alignment.CenterEnd,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                IconButton(
+                    modifier = Modifier.size(24.dp),
+                    onClick = onCancelButtonClick
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Close,
+                        contentDescription = stringResource(id = org.openedx.core.R.string.core_cancel),
+                        tint = MaterialTheme.appColors.primary
+                    )
+                }
+            }
             Icon(
                 modifier = Modifier
                     .width(76.dp)
@@ -148,7 +201,8 @@ private fun ChapterEndDialogScreen(
                             text = stringResource(id = R.string.course_next_section),
                             painter = painterResource(org.openedx.core.R.drawable.core_ic_forward),
                             color = MaterialTheme.appColors.buttonText,
-                            textStyle = MaterialTheme.appTypography.labelLarge
+                            textStyle = MaterialTheme.appTypography.labelLarge,
+                            iconModifier = Modifier.rotate(if (isVerticalNavigation) 90f else 0f)
                         )
                     },
                     onClick = onProceedButtonClick
@@ -159,7 +213,14 @@ private fun ChapterEndDialogScreen(
                 borderColor = MaterialTheme.appColors.buttonBackground,
                 textColor = MaterialTheme.appColors.buttonBackground,
                 text = stringResource(id = R.string.course_back_to_outline),
-                onClick = onBackButtonClick
+                onClick = onBackButtonClick,
+                content = {
+                    AutoSizeText(
+                        text = stringResource(id = R.string.course_back_to_outline),
+                        style = MaterialTheme.appTypography.bodyMedium,
+                        color = MaterialTheme.appColors.buttonBackground
+                    )
+                }
             )
             if (nextSectionName.isNotEmpty()) {
                 Spacer(Modifier.height(24.dp))
@@ -175,16 +236,151 @@ private fun ChapterEndDialogScreen(
     }
 }
 
+
+@Composable
+private fun ChapterEndDialogScreenLandscape(
+    sectionName: String,
+    nextSectionName: String,
+    onBackButtonClick: () -> Unit,
+    onProceedButtonClick: () -> Unit,
+    onCancelButtonClick: () -> Unit
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clip(MaterialTheme.appShapes.courseImageShape),
+        backgroundColor = MaterialTheme.appColors.background,
+        shape = MaterialTheme.appShapes.courseImageShape
+    ) {
+        Column(
+            modifier = Modifier.padding(38.dp)
+        ) {
+            Box(
+                contentAlignment = Alignment.CenterEnd,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = 12.dp)
+            ) {
+                IconButton(
+                    modifier = Modifier.size(24.dp),
+                    onClick = onCancelButtonClick
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Close,
+                        contentDescription = stringResource(id = org.openedx.core.R.string.core_cancel),
+                        tint = MaterialTheme.appColors.primary
+                    )
+                }
+            }
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Column(
+                    Modifier.weight(1f),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Icon(
+                        modifier = Modifier
+                            .width(76.dp)
+                            .height(72.dp),
+                        painter = painterResource(id = R.drawable.course_id_diamond),
+                        contentDescription = null,
+                        tint = MaterialTheme.appColors.onBackground
+                    )
+                    Spacer(Modifier.height(36.dp))
+                    Text(
+                        modifier = Modifier.fillMaxWidth(),
+                        text = stringResource(id = R.string.course_good_work),
+                        color = MaterialTheme.appColors.textPrimary,
+                        style = MaterialTheme.appTypography.titleLarge,
+                        textAlign = TextAlign.Center
+                    )
+                    Spacer(Modifier.height(8.dp))
+                    Text(
+                        modifier = Modifier.fillMaxWidth(),
+                        text = stringResource(id = R.string.course_section_finished, sectionName),
+                        color = MaterialTheme.appColors.textFieldText,
+                        style = MaterialTheme.appTypography.titleSmall,
+                        textAlign = TextAlign.Center
+                    )
+                }
+                Spacer(Modifier.width(42.dp))
+                Column(
+                    Modifier.weight(1f),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    if (nextSectionName.isNotEmpty()) {
+                        OpenEdXButton(
+                            text = stringResource(id = R.string.course_next_section),
+                            content = {
+                                TextIcon(
+                                    text = stringResource(id = R.string.course_next_section),
+                                    painter = painterResource(org.openedx.core.R.drawable.core_ic_forward),
+                                    color = MaterialTheme.appColors.buttonText,
+                                    textStyle = MaterialTheme.appTypography.labelLarge
+                                )
+                            },
+                            onClick = onProceedButtonClick
+                        )
+                        Spacer(Modifier.height(16.dp))
+                    }
+                    OpenEdXOutlinedButton(
+                        borderColor = MaterialTheme.appColors.buttonBackground,
+                        textColor = MaterialTheme.appColors.buttonBackground,
+                        text = stringResource(id = R.string.course_back_to_outline),
+                        onClick = onBackButtonClick,
+                        content = {
+                            AutoSizeText(
+                                text = stringResource(id = R.string.course_back_to_outline),
+                                style = MaterialTheme.appTypography.bodyMedium,
+                                color = MaterialTheme.appColors.buttonBackground
+                            )
+                        }
+                    )
+                    if (nextSectionName.isNotEmpty()) {
+                        Spacer(Modifier.height(24.dp))
+                        Text(
+                            modifier = Modifier.fillMaxWidth(),
+                            text = stringResource(id = R.string.course_to_proceed, nextSectionName),
+                            color = MaterialTheme.appColors.textPrimaryVariant,
+                            style = MaterialTheme.appTypography.labelSmall,
+                            textAlign = TextAlign.Center
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
+
 @Preview(uiMode = UI_MODE_NIGHT_NO)
 @Preview(uiMode = UI_MODE_NIGHT_YES)
 @Composable
 fun ChapterEndDialogScreenPreview() {
     OpenEdXTheme {
         ChapterEndDialogScreen(
+            sectionName = "Section",
+            nextSectionName = "Section2",
+            isVerticalNavigation = true,
+            onBackButtonClick = {},
+            onProceedButtonClick = {},
+            onCancelButtonClick = {}
+        )
+    }
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Composable
+fun ChapterEndDialogScreenLandscapePreview() {
+    OpenEdXTheme {
+        ChapterEndDialogScreenLandscape(
             sectionName = "Section",
             nextSectionName = "Section2",
             onBackButtonClick = {},
-            onProceedButtonClick = {}
+            onProceedButtonClick = {},
+            onCancelButtonClick = {}
         )
     }
 }
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/CourseAnalytics.kt b/course/src/main/java/org/openedx/course/presentation/CourseAnalytics.kt
index 5cea3d63f..cdae67678 100644
--- a/course/src/main/java/org/openedx/course/presentation/CourseAnalytics.kt
+++ b/course/src/main/java/org/openedx/course/presentation/CourseAnalytics.kt
@@ -15,5 +15,6 @@ interface CourseAnalytics {
     fun courseTabClickedEvent(courseId: String, courseName: String)
     fun videoTabClickedEvent(courseId: String, courseName: String)
     fun discussionTabClickedEvent(courseId: String, courseName: String)
+    fun datesTabClickedEvent(courseId: String, courseName: String)
     fun handoutsTabClickedEvent(courseId: String, courseName: String)
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/CourseRouter.kt b/course/src/main/java/org/openedx/course/presentation/CourseRouter.kt
index 11c4420c0..05a4f63a6 100644
--- a/course/src/main/java/org/openedx/course/presentation/CourseRouter.kt
+++ b/course/src/main/java/org/openedx/course/presentation/CourseRouter.kt
@@ -1,47 +1,42 @@
 package org.openedx.course.presentation
 
 import androidx.fragment.app.FragmentManager
-import org.openedx.core.domain.model.CoursewareAccess
 import org.openedx.core.presentation.course.CourseViewMode
 import org.openedx.course.presentation.handouts.HandoutsType
-import java.util.Date
 
 interface CourseRouter {
 
     fun navigateToCourseOutline(
-        fm: FragmentManager,
-        courseId: String,
-        courseTitle: String
+        fm: FragmentManager, courseId: String, courseTitle: String
     )
 
     fun navigateToNoAccess(
         fm: FragmentManager,
-        title: String,
-        coursewareAccess: CoursewareAccess,
-        auditAccessExpires: Date?
+        title: String
     )
 
     fun navigateToCourseSubsections(
         fm: FragmentManager,
         courseId: String,
-        blockId: String,
-        title: String,
-        mode: CourseViewMode,
+        subSectionId: String,
+        unitId: String = "",
+        componentId: String = "",
+        mode: CourseViewMode
     )
 
     fun navigateToCourseContainer(
         fm: FragmentManager,
-        blockId: String,
         courseId: String,
-        courseName: String,
+        unitId: String,
+        componentId: String = "",
         mode: CourseViewMode
     )
 
     fun replaceCourseContainer(
         fm: FragmentManager,
-        blockId: String,
         courseId: String,
-        courseName: String,
+        unitId: String,
+        componentId: String = "",
         mode: CourseViewMode
     )
 
@@ -50,7 +45,8 @@ interface CourseRouter {
         videoUrl: String,
         videoTime: Long,
         blockId: String,
-        courseId: String
+        courseId: String,
+        isPlaying: Boolean
     )
 
     fun navigateToFullScreenYoutubeVideo(
@@ -58,14 +54,23 @@ interface CourseRouter {
         videoUrl: String,
         videoTime: Long,
         blockId: String,
-        courseId: String
+        courseId: String,
+        isPlaying: Boolean
     )
 
     fun navigateToHandoutsWebView(
+        fm: FragmentManager, courseId: String, title: String, type: HandoutsType
+    )
+
+    fun navigateToCourseInfo(
         fm: FragmentManager,
         courseId: String,
-        title: String,
-        type: HandoutsType
+        infoType: String,
     )
 
-}
\ No newline at end of file
+    fun navigateToSignUp(fm: FragmentManager, courseId: String?)
+
+    fun navigateToSignIn(fm: FragmentManager, courseId: String?)
+
+    fun navigateToLogistration(fm: FragmentManager, courseId: String?)
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/container/CourseContainerAdapter.kt b/course/src/main/java/org/openedx/course/presentation/container/CourseContainerAdapter.kt
index 80a383143..cb9ca5930 100644
--- a/course/src/main/java/org/openedx/course/presentation/container/CourseContainerAdapter.kt
+++ b/course/src/main/java/org/openedx/course/presentation/container/CourseContainerAdapter.kt
@@ -2,16 +2,30 @@ package org.openedx.course.presentation.container
 
 import androidx.fragment.app.Fragment
 import androidx.viewpager2.adapter.FragmentStateAdapter
+import org.openedx.course.R
 
 class CourseContainerAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
 
-    private val fragments = ArrayList<Fragment>()
+    private val fragments = HashMap<CourseContainerTab, Fragment>()
 
     override fun getItemCount(): Int = fragments.size
 
-    override fun createFragment(position: Int): Fragment = fragments[position]
+    override fun createFragment(position: Int): Fragment {
+        val tab = CourseContainerTab.values().find { it.ordinal == position }
+        return fragments[tab] ?: throw IllegalStateException("Fragment not found for tab $tab")
+    }
 
-    fun addFragment(fragment: Fragment) {
-        fragments.add(fragment)
+    fun addFragment(tab: CourseContainerTab, fragment: Fragment) {
+        fragments[tab] = fragment
     }
-}
\ No newline at end of file
+
+    fun getFragment(tab: CourseContainerTab): Fragment? = fragments[tab]
+}
+
+enum class CourseContainerTab(val itemId: Int, val titleResId: Int) {
+    COURSE(itemId = R.id.course, titleResId = R.string.course_navigation_course),
+    VIDEOS(itemId = R.id.videos, titleResId = R.string.course_navigation_video),
+    DISCUSSION(itemId = R.id.discussions, titleResId = R.string.course_navigation_discussion),
+    DATES(itemId = R.id.dates, titleResId = R.string.course_navigation_dates),
+    HANDOUTS(itemId = R.id.resources, titleResId = R.string.course_navigation_handouts),
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/container/CourseContainerFragment.kt b/course/src/main/java/org/openedx/course/presentation/container/CourseContainerFragment.kt
index 17363a01b..f2a27d510 100644
--- a/course/src/main/java/org/openedx/course/presentation/container/CourseContainerFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/container/CourseContainerFragment.kt
@@ -7,36 +7,38 @@ import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
 import androidx.viewpager2.widget.ViewPager2
 import com.google.android.material.snackbar.Snackbar
+import com.google.android.material.tabs.TabLayoutMediator
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.presentation.global.viewBinding
 import org.openedx.course.R
 import org.openedx.course.databinding.FragmentCourseContainerBinding
 import org.openedx.course.presentation.CourseRouter
+import org.openedx.course.presentation.container.CourseContainerTab
+import org.openedx.course.presentation.dates.CourseDatesFragment
 import org.openedx.course.presentation.handouts.HandoutsFragment
 import org.openedx.course.presentation.outline.CourseOutlineFragment
+import org.openedx.course.presentation.ui.CourseToolbar
 import org.openedx.course.presentation.videos.CourseVideosFragment
 import org.openedx.discussion.presentation.topics.DiscussionTopicsFragment
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
+import org.openedx.course.presentation.container.CourseContainerTab as Tabs
 
 class CourseContainerFragment : Fragment(R.layout.fragment_course_container) {
 
     private val binding by viewBinding(FragmentCourseContainerBinding::bind)
     private val viewModel by viewModel<CourseContainerViewModel> {
-        parametersOf(requireArguments().getString(ARG_COURSE_ID, ""))
+        parametersOf(
+            requireArguments().getString(ARG_COURSE_ID, ""),
+            requireArguments().getString(ARG_TITLE, "")
+        )
     }
     private val router by inject<CourseRouter>()
 
-
     private var adapter: CourseContainerAdapter? = null
 
-    private var courseTitle = ""
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        with(requireArguments()) {
-            courseTitle = getString(ARG_TITLE, "")
-        }
         viewModel.preloadCourseStructure()
     }
 
@@ -44,33 +46,8 @@ class CourseContainerFragment : Fragment(R.layout.fragment_course_container) {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
-
+        setupToolbar(viewModel.courseName)
         observe()
-
-        binding.bottomNavView.setOnItemSelectedListener {
-            when (it.itemId) {
-                R.id.outline -> {
-                    viewModel.courseTabClickedEvent()
-                    binding.viewPager.setCurrentItem(0, false)
-                }
-
-                R.id.videos -> {
-                    viewModel.videoTabClickedEvent()
-                    binding.viewPager.setCurrentItem(1, false)
-                }
-
-                R.id.discussions -> {
-                    viewModel.discussionTabClickedEvent()
-                    binding.viewPager.setCurrentItem(2, false)
-                }
-
-                R.id.resources -> {
-                    viewModel.handoutsTabClickedEvent()
-                    binding.viewPager.setCurrentItem(3, false)
-                }
-            }
-            true
-        }
     }
 
     override fun onDestroyView() {
@@ -79,20 +56,15 @@ class CourseContainerFragment : Fragment(R.layout.fragment_course_container) {
     }
 
     private fun observe() {
-        viewModel.dataReady.observe(viewLifecycleOwner) { coursewareAccess ->
-            if (coursewareAccess != null) {
-                if (coursewareAccess.hasAccess) {
-                    binding.viewPager.isVisible = true
-                    binding.bottomNavView.isVisible = true
-                    initViewPager()
-                } else {
-                    router.navigateToNoAccess(
-                        requireActivity().supportFragmentManager,
-                        courseTitle,
-                        coursewareAccess,
-                        null
-                    )
-                }
+        viewModel.dataReady.observe(viewLifecycleOwner) { isReady ->
+            if (isReady == true) {
+                setupToolbar(viewModel.courseName)
+                initViewPager()
+            } else {
+                router.navigateToNoAccess(
+                    requireActivity().supportFragmentManager,
+                    viewModel.courseName
+                )
             }
         }
         viewModel.errorMessage.observe(viewLifecycleOwner) {
@@ -108,23 +80,83 @@ class CourseContainerFragment : Fragment(R.layout.fragment_course_container) {
         }
     }
 
+    private fun setupToolbar(courseName: String) {
+        binding.toolbar.setContent {
+            CourseToolbar(
+                title = courseName,
+                onBackClick = {
+                    requireActivity().supportFragmentManager.popBackStack()
+                }
+            )
+        }
+    }
+
     private fun initViewPager() {
+        binding.viewPager.isVisible = true
         binding.viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
-        binding.viewPager.offscreenPageLimit = 4
         adapter = CourseContainerAdapter(this).apply {
-            addFragment(CourseOutlineFragment.newInstance(viewModel.courseId, courseTitle))
-            addFragment(CourseVideosFragment.newInstance(viewModel.courseId, courseTitle))
-            addFragment(DiscussionTopicsFragment.newInstance(viewModel.courseId, courseTitle))
-            addFragment(HandoutsFragment.newInstance(viewModel.courseId))
+            addFragment(
+                Tabs.COURSE,
+                CourseOutlineFragment.newInstance(viewModel.courseId, viewModel.courseName)
+            )
+            addFragment(
+                Tabs.VIDEOS,
+                CourseVideosFragment.newInstance(viewModel.courseId, viewModel.courseName)
+            )
+            addFragment(
+                Tabs.DISCUSSION,
+                DiscussionTopicsFragment.newInstance(viewModel.courseId, viewModel.courseName)
+            )
+            addFragment(
+                Tabs.DATES,
+                CourseDatesFragment.newInstance(viewModel.courseId, viewModel.isSelfPaced)
+            )
+            addFragment(
+                Tabs.HANDOUTS,
+                HandoutsFragment.newInstance(viewModel.courseId)
+            )
         }
+        binding.viewPager.offscreenPageLimit = adapter?.itemCount ?: 1
         binding.viewPager.adapter = adapter
-        binding.viewPager.isUserInputEnabled = false
+
+        if (viewModel.isCourseTopTabBarEnabled) {
+            TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
+                tab.text = getString(
+                    Tabs.values().find { it.ordinal == position }?.titleResId
+                        ?: R.string.course_navigation_course
+                )
+            }.attach()
+            binding.tabLayout.isVisible = true
+
+        } else {
+            binding.viewPager.isUserInputEnabled = false
+            binding.bottomNavView.setOnItemSelectedListener { menuItem ->
+                Tabs.values().find { menuItem.itemId == it.itemId }?.let { tab ->
+                    viewModel.courseContainerTabClickedEvent(tab)
+                    binding.viewPager.setCurrentItem(tab.ordinal, false)
+                }
+                true
+            }
+            binding.bottomNavView.isVisible = true
+        }
     }
 
     fun updateCourseStructure(withSwipeRefresh: Boolean) {
         viewModel.updateData(withSwipeRefresh)
     }
 
+    fun updateCourseDates() {
+        adapter?.getFragment(Tabs.DATES)?.let {
+            (it as CourseDatesFragment).updateData()
+        }
+    }
+
+    fun navigateToTab(tab: CourseContainerTab) {
+        adapter?.getFragment(tab)?.let {
+            binding.viewPager.setCurrentItem(tab.ordinal, true)
+        }
+    }
+
     companion object {
         private const val ARG_COURSE_ID = "courseId"
         private const val ARG_TITLE = "title"
@@ -140,4 +172,4 @@ class CourseContainerFragment : Fragment(R.layout.fragment_course_container) {
             return fragment
         }
     }
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/container/CourseContainerViewModel.kt b/course/src/main/java/org/openedx/course/presentation/container/CourseContainerViewModel.kt
index 1fb6e9aa5..f0d9a9507 100644
--- a/course/src/main/java/org/openedx/course/presentation/container/CourseContainerViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/container/CourseContainerViewModel.kt
@@ -3,22 +3,26 @@ package org.openedx.course.presentation.container
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
 import org.openedx.core.BaseViewModel
 import org.openedx.core.R
 import org.openedx.core.SingleEventLiveData
-import org.openedx.core.domain.model.CoursewareAccess
+import org.openedx.core.config.Config
 import org.openedx.core.exception.NoCachedDataException
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.ResourceManager
 import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.CourseCompletionSet
 import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.core.system.notifier.CourseStructureUpdated
 import org.openedx.course.domain.interactor.CourseInteractor
 import org.openedx.course.presentation.CourseAnalytics
-import kotlinx.coroutines.launch
+import java.util.Date
 
 class CourseContainerViewModel(
     val courseId: String,
+    var courseName: String,
+    private val config: Config,
     private val interactor: CourseInteractor,
     private val resourceManager: ResourceManager,
     private val notifier: CourseNotifier,
@@ -26,8 +30,10 @@ class CourseContainerViewModel(
     private val analytics: CourseAnalytics
 ) : BaseViewModel() {
 
-    private val _dataReady = MutableLiveData<CoursewareAccess>()
-    val dataReady: LiveData<CoursewareAccess>
+    val isCourseTopTabBarEnabled get() = config.isCourseTopTabBarEnabled()
+
+    private val _dataReady = MutableLiveData<Boolean?>()
+    val dataReady: LiveData<Boolean?>
         get() = _dataReady
 
     private val _errorMessage = SingleEventLiveData<String>()
@@ -38,7 +44,19 @@ class CourseContainerViewModel(
     val showProgress: LiveData<Boolean>
         get() = _showProgress
 
-    private var courseName = ""
+    private var _isSelfPaced: Boolean = true
+    val isSelfPaced: Boolean
+        get() = _isSelfPaced
+
+    init {
+        viewModelScope.launch {
+            notifier.notifier.collect { event ->
+                if (event is CourseCompletionSet) {
+                    updateData(false)
+                }
+            }
+        }
+    }
 
     fun preloadCourseStructure() {
         if (_dataReady.value != null) {
@@ -55,7 +73,10 @@ class CourseContainerViewModel(
                 }
                 val courseStructure = interactor.getCourseStructureFromCache()
                 courseName = courseStructure.name
-                _dataReady.value = courseStructure.coursewareAccess
+                _isSelfPaced = courseStructure.isSelfPaced
+                _dataReady.value = courseStructure.start?.let { start ->
+                    start < Date()
+                }
             } catch (e: Exception) {
                 if (e.isInternetError() || e is NoCachedDataException) {
                     _errorMessage.value =
@@ -88,20 +109,33 @@ class CourseContainerViewModel(
         }
     }
 
-    fun courseTabClickedEvent() {
+    fun courseContainerTabClickedEvent(tab: CourseContainerTab) {
+        when (tab) {
+            CourseContainerTab.COURSE -> courseTabClickedEvent()
+            CourseContainerTab.VIDEOS -> videoTabClickedEvent()
+            CourseContainerTab.DISCUSSION -> discussionTabClickedEvent()
+            CourseContainerTab.DATES -> datesTabClickedEvent()
+            CourseContainerTab.HANDOUTS -> handoutsTabClickedEvent()
+        }
+    }
+
+    private fun courseTabClickedEvent() {
         analytics.courseTabClickedEvent(courseId, courseName)
     }
 
-    fun videoTabClickedEvent() {
+    private fun videoTabClickedEvent() {
         analytics.videoTabClickedEvent(courseId, courseName)
     }
 
-    fun discussionTabClickedEvent() {
+    private fun discussionTabClickedEvent() {
         analytics.discussionTabClickedEvent(courseId, courseName)
     }
 
-    fun handoutsTabClickedEvent() {
-        analytics.handoutsTabClickedEvent(courseId, courseName)
+    private fun datesTabClickedEvent() {
+        analytics.datesTabClickedEvent(courseId, courseName)
     }
 
-}
\ No newline at end of file
+    private fun handoutsTabClickedEvent() {
+        analytics.handoutsTabClickedEvent(courseId, courseName)
+    }
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/container/NoAccessCourseContainerFragment.kt b/course/src/main/java/org/openedx/course/presentation/container/NoAccessCourseContainerFragment.kt
index c23c3c71b..f6f5d8e7d 100644
--- a/course/src/main/java/org/openedx/course/presentation/container/NoAccessCourseContainerFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/container/NoAccessCourseContainerFragment.kt
@@ -25,7 +25,6 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
-import org.openedx.core.domain.model.CoursewareAccess
 import org.openedx.core.extension.parcelable
 import org.openedx.core.ui.*
 import org.openedx.core.ui.theme.OpenEdXTheme
@@ -36,19 +35,6 @@ import org.openedx.course.R as courseR
 
 class NoAccessCourseContainerFragment : Fragment() {
 
-    private var courseTitle = ""
-    private var coursewareAccess: CoursewareAccess? = null
-    private var auditAccessExpires: Date? = null
-
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        with(requireArguments()) {
-            courseTitle = getString(ARG_TITLE, "")
-            coursewareAccess = parcelable(ARG_COURSEWARE_ACCESS)
-            auditAccessExpires = parcelable(ARG_AUDIT_ACCESS_EXPIRES)
-        }
-    }
-
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
@@ -58,12 +44,9 @@ class NoAccessCourseContainerFragment : Fragment() {
         setContent {
             OpenEdXTheme {
                 val windowSize = rememberWindowSize()
-                val auditAccessExpired =
-                    auditAccessExpires != null && Date().after(auditAccessExpires)
                 NoAccessCourseContainerScreen(
                     windowSize = windowSize,
-                    title = courseTitle,
-                    auditAccessExpired = auditAccessExpired,
+                    title = requireArguments().getString(ARG_TITLE, ""),
                     onBackClick = {
                         requireActivity().supportFragmentManager.popBackStack()
                     }
@@ -74,19 +57,13 @@ class NoAccessCourseContainerFragment : Fragment() {
 
     companion object {
         private const val ARG_TITLE = "title"
-        private const val ARG_COURSEWARE_ACCESS = "coursewareAccess"
-        private const val ARG_AUDIT_ACCESS_EXPIRES = "auditAccessExpires"
 
         fun newInstance(
             title: String,
-            coursewareAccess: CoursewareAccess,
-            auditAccessExpires: Date?
         ): NoAccessCourseContainerFragment {
             val fragment = NoAccessCourseContainerFragment()
             fragment.arguments = bundleOf(
-                ARG_TITLE to title,
-                ARG_COURSEWARE_ACCESS to coursewareAccess,
-                ARG_AUDIT_ACCESS_EXPIRES to auditAccessExpires
+                ARG_TITLE to title
             )
             return fragment
         }
@@ -99,7 +76,6 @@ class NoAccessCourseContainerFragment : Fragment() {
 private fun NoAccessCourseContainerScreen(
     windowSize: WindowSize,
     title: String,
-    auditAccessExpired: Boolean,
     onBackClick: () -> Unit
 ) {
     val scaffoldState = rememberScaffoldState()
@@ -165,11 +141,7 @@ private fun NoAccessCourseContainerScreen(
                         )
                         Spacer(modifier = Modifier.height(10.dp))
                         Text(
-                            text = if (auditAccessExpired) {
-                                stringResource(id = courseR.string.course_access_expired)
-                            } else {
-                                stringResource(id = courseR.string.course_not_started)
-                            },
+                            text = stringResource(id = courseR.string.course_not_started),
                             color = MaterialTheme.appColors.textPrimary,
                             style = MaterialTheme.appTypography.bodyLarge
                         )
@@ -189,8 +161,7 @@ fun NoAccessCourseContainerScreenPreview() {
     OpenEdXTheme {
         NoAccessCourseContainerScreen(
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-            title = "Example title",
-            auditAccessExpired = false,
+            title = "Course title",
             onBackClick = {}
         )
     }
diff --git a/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesFragment.kt b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesFragment.kt
new file mode 100644
index 000000000..98d4b4d62
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesFragment.kt
@@ -0,0 +1,732 @@
+package org.openedx.course.presentation.dates
+
+import android.content.res.Configuration
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.core.updateTransition
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowRight
+import androidx.compose.material.icons.filled.KeyboardArrowUp
+import androidx.compose.material.pullrefresh.PullRefreshIndicator
+import androidx.compose.material.pullrefresh.pullRefresh
+import androidx.compose.material.pullrefresh.rememberPullRefreshState
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.pluralStringResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.openedx.core.UIMessage
+import org.openedx.core.data.model.DateType
+import org.openedx.core.domain.model.CourseDateBlock
+import org.openedx.core.domain.model.CourseDatesBannerInfo
+import org.openedx.core.domain.model.CourseDatesResult
+import org.openedx.core.domain.model.DatesSection
+import org.openedx.core.extension.isNotEmptyThenLet
+import org.openedx.core.presentation.course.CourseViewMode
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.OfflineModeDialog
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.core.utils.TimeUtils
+import org.openedx.core.utils.clearTime
+import org.openedx.course.R
+import org.openedx.course.presentation.CourseRouter
+import org.openedx.course.presentation.container.CourseContainerFragment
+import org.openedx.course.presentation.ui.CourseDatesBanner
+import org.openedx.course.presentation.ui.CourseDatesBannerTablet
+import org.openedx.core.R as coreR
+
+class CourseDatesFragment : Fragment() {
+
+    private val viewModel by viewModel<CourseDatesViewModel> {
+        parametersOf(
+            requireArguments().getString(ARG_COURSE_ID, ""),
+            requireArguments().getBoolean(ARG_IS_SELF_PACED, true),
+        )
+    }
+    private val router by inject<CourseRouter>()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val windowSize = rememberWindowSize()
+                val uiState by viewModel.uiState.observeAsState()
+                val uiMessage by viewModel.uiMessage.observeAsState()
+                val refreshing by viewModel.updating.observeAsState(false)
+
+                CourseDatesScreen(
+                    windowSize = windowSize,
+                    uiState = uiState,
+                    uiMessage = uiMessage,
+                    refreshing = refreshing,
+                    isSelfPaced = viewModel.isSelfPaced,
+                    hasInternetConnection = viewModel.hasInternetConnection,
+                    onReloadClick = {
+                        viewModel.getCourseDates()
+                    },
+                    onSwipeRefresh = {
+                        viewModel.getCourseDates(swipeToRefresh = true)
+                    },
+                    onItemClick = { blockId ->
+                        if (blockId.isNotEmpty()) {
+                            viewModel.getVerticalBlock(blockId)?.let { verticalBlock ->
+                                viewModel.getSequentialBlock(verticalBlock.id)
+                                    ?.let { sequentialBlock ->
+                                        router.navigateToCourseSubsections(
+                                            fm = requireActivity().supportFragmentManager,
+                                            subSectionId = sequentialBlock.id,
+                                            courseId = viewModel.courseId,
+                                            unitId = verticalBlock.id,
+                                            mode = CourseViewMode.FULL
+                                        )
+                                    }
+                            }
+                        }
+                    },
+                    onSyncDates = {
+                        viewModel.resetCourseDatesBanner {
+                            if (it) {
+                                (parentFragment as CourseContainerFragment)
+                                    .updateCourseStructure(false)
+                            }
+                        }
+                    },
+                )
+            }
+        }
+    }
+
+    fun updateData() {
+        viewModel.getCourseDates()
+    }
+
+    companion object {
+        private const val ARG_COURSE_ID = "courseId"
+        private const val ARG_IS_SELF_PACED = "selfPaced"
+        fun newInstance(
+            courseId: String,
+            isSelfPaced: Boolean,
+        ): CourseDatesFragment {
+            val fragment = CourseDatesFragment()
+            fragment.arguments =
+                bundleOf(
+                    ARG_COURSE_ID to courseId,
+                    ARG_IS_SELF_PACED to isSelfPaced,
+                )
+            return fragment
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+internal fun CourseDatesScreen(
+    windowSize: WindowSize,
+    uiState: DatesUIState?,
+    uiMessage: UIMessage?,
+    refreshing: Boolean,
+    isSelfPaced: Boolean,
+    hasInternetConnection: Boolean,
+    onReloadClick: () -> Unit,
+    onSwipeRefresh: () -> Unit,
+    onItemClick: (String) -> Unit,
+    onSyncDates: () -> Unit,
+) {
+    val scaffoldState = rememberScaffoldState()
+    val pullRefreshState =
+        rememberPullRefreshState(refreshing = refreshing, onRefresh = { onSwipeRefresh() })
+
+    var isInternetConnectionShown by rememberSaveable {
+        mutableStateOf(false)
+    }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        scaffoldState = scaffoldState,
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+        val modifierScreenWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier.widthIn(Dp.Unspecified, 560.dp),
+                    compact = Modifier.fillMaxWidth()
+                )
+            )
+        }
+
+        val listBottomPadding by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = PaddingValues(bottom = 24.dp),
+                    compact = PaddingValues(bottom = 24.dp)
+                )
+            )
+        }
+
+        HandleUIMessage(uiMessage = uiMessage, scaffoldState = scaffoldState)
+
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(it)
+                .statusBarsInset()
+                .displayCutoutForLandscape(), contentAlignment = Alignment.TopCenter
+        ) {
+            Surface(
+                modifier = modifierScreenWidth,
+                color = MaterialTheme.appColors.background,
+            ) {
+                Box(
+                    Modifier
+                        .fillMaxWidth()
+                        .pullRefresh(pullRefreshState)
+                ) {
+                    uiState?.let {
+                        when (uiState) {
+                            is DatesUIState.Loading -> {
+                                Box(
+                                    modifier = Modifier.fillMaxSize(),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                                }
+                            }
+
+                            is DatesUIState.Dates -> {
+                                LazyColumn(
+                                    modifier = Modifier
+                                        .fillMaxSize()
+                                        .padding(horizontal = 16.dp),
+                                    contentPadding = listBottomPadding
+                                ) {
+                                    val courseBanner = uiState.courseDatesResult.courseBanner
+                                    val datesSection = uiState.courseDatesResult.datesSection
+
+                                    if (courseBanner.isBannerAvailableForUserType(isSelfPaced)) {
+                                        item {
+                                            if (windowSize.isTablet) {
+                                                CourseDatesBannerTablet(
+                                                    modifier = Modifier.padding(bottom = 16.dp),
+                                                    banner = courseBanner,
+                                                    resetDates = onSyncDates,
+                                                )
+                                            } else {
+                                                CourseDatesBanner(
+                                                    modifier = Modifier.padding(bottom = 16.dp),
+                                                    banner = courseBanner,
+                                                    resetDates = onSyncDates
+                                                )
+                                            }
+                                        }
+                                    }
+
+                                    // Handle DatesSection.COMPLETED separately
+                                    datesSection[DatesSection.COMPLETED]?.isNotEmptyThenLet { section ->
+                                        item {
+                                            ExpandableView(
+                                                sectionKey = DatesSection.COMPLETED,
+                                                sectionDates = section,
+                                                onItemClick = onItemClick,
+                                            )
+                                        }
+                                    }
+
+                                    // Handle other sections
+                                    val sectionsKey =
+                                        datesSection.keys.minus(DatesSection.COMPLETED).toList()
+                                    sectionsKey.forEach { sectionKey ->
+                                        datesSection[sectionKey]?.isNotEmptyThenLet { section ->
+                                            item {
+                                                CourseDateBlockSection(
+                                                    sectionKey = sectionKey,
+                                                    sectionDates = section,
+                                                    onItemClick = onItemClick,
+                                                )
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            DatesUIState.Empty -> {
+                                Box(
+                                    modifier = Modifier.fillMaxSize(),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    Text(
+                                        modifier = Modifier.fillMaxWidth(),
+                                        text = stringResource(id = R.string.course_dates_unavailable_message),
+                                        color = MaterialTheme.appColors.textPrimary,
+                                        style = MaterialTheme.appTypography.titleMedium,
+                                        textAlign = TextAlign.Center
+                                    )
+                                }
+                            }
+                        }
+                    }
+                    PullRefreshIndicator(
+                        refreshing, pullRefreshState, Modifier.align(Alignment.TopCenter)
+                    )
+                    if (!isInternetConnectionShown && !hasInternetConnection) {
+                        OfflineModeDialog(
+                            Modifier
+                                .fillMaxWidth()
+                                .align(Alignment.BottomCenter),
+                            onDismissCLick = {
+                                isInternetConnectionShown = true
+                            },
+                            onReloadClick = {
+                                isInternetConnectionShown = true
+                                onReloadClick()
+                            })
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun ExpandableView(
+    sectionKey: DatesSection = DatesSection.NONE,
+    sectionDates: List<CourseDateBlock>,
+    onItemClick: (String) -> Unit,
+) {
+    var expanded by remember { mutableStateOf(false) }
+    // expandable view Animation
+    val transition = updateTransition(targetState = expanded, label = "expandable")
+    val iconRotationDeg by transition.animateFloat(label = "icon rotation") { if (it) 180f else 0f }
+    val enterTransition = remember {
+        expandVertically(
+            expandFrom = Alignment.Top,
+            animationSpec = tween(300)
+        ) + fadeIn(initialAlpha = 0.3f, animationSpec = tween(300))
+    }
+    val exitTransition = remember {
+        shrinkVertically(
+            shrinkTowards = Alignment.Top,
+            animationSpec = tween(300)
+        ) + fadeOut(animationSpec = tween(300))
+    }
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(MaterialTheme.appColors.cardViewBackground, MaterialTheme.shapes.medium)
+            .border(0.75.dp, MaterialTheme.appColors.cardViewBorder, MaterialTheme.shapes.medium)
+    ) {
+        Row(modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 8.dp, start = 16.dp, end = 8.dp, bottom = 8.dp)
+            .clickable { expanded = !expanded }) {
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .background(Color.Transparent)
+            ) {
+                Text(
+                    text = stringResource(id = sectionKey.stringResId),
+                    style = MaterialTheme.appTypography.titleMedium,
+                    color = MaterialTheme.appColors.textDark,
+                    modifier = Modifier.fillMaxWidth()
+                )
+
+                AnimatedVisibility(visible = expanded.not()) {
+                    Text(
+                        text = pluralStringResource(
+                            id = coreR.plurals.core_date_items_hidden,
+                            count = sectionDates.size,
+                            formatArgs = arrayOf(sectionDates.size)
+                        ),
+                        style = MaterialTheme.appTypography.labelMedium,
+                        color = MaterialTheme.appColors.textDark,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                    )
+                }
+
+            }
+            Spacer(modifier = Modifier.width(16.dp))
+            Icon(
+                imageVector = Icons.Filled.KeyboardArrowUp,
+                tint = MaterialTheme.appColors.textDark,
+                contentDescription = null,
+                modifier = Modifier
+                    .size(24.dp)
+                    .rotate(iconRotationDeg)
+            )
+        }
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        AnimatedVisibility(
+            visible = expanded,
+            enter = enterTransition,
+            exit = exitTransition,
+            modifier = Modifier
+                .fillMaxWidth()
+                .clip(MaterialTheme.shapes.medium)
+                .padding(top = 52.dp, bottom = 8.dp)
+        ) {
+            CourseDateBlockSection(
+                sectionKey = sectionKey,
+                sectionDates = sectionDates,
+                onItemClick = onItemClick,
+            )
+        }
+    }
+}
+
+@Composable
+private fun CourseDateBlockSection(
+    sectionKey: DatesSection = DatesSection.NONE,
+    sectionDates: List<CourseDateBlock>,
+    onItemClick: (String) -> Unit,
+) {
+    Column(modifier = Modifier.padding(start = 8.dp)) {
+        if (sectionKey != DatesSection.COMPLETED) {
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 16.dp, bottom = 4.dp),
+                text = stringResource(id = sectionKey.stringResId),
+                color = MaterialTheme.appColors.textDark,
+                style = MaterialTheme.appTypography.titleMedium,
+            )
+        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(intrinsicSize = IntrinsicSize.Min) // this make height of all cards to the tallest card.
+        ) {
+            if (sectionKey != DatesSection.COMPLETED) {
+                DateBullet(section = sectionKey)
+            }
+            DateBlock(dateBlocks = sectionDates, onItemClick = onItemClick)
+        }
+    }
+}
+
+@Composable
+private fun DateBullet(
+    section: DatesSection = DatesSection.NONE,
+) {
+    val barColor = when (section) {
+        DatesSection.COMPLETED -> MaterialTheme.appColors.cardViewBackground
+        DatesSection.PAST_DUE -> MaterialTheme.appColors.datesSectionBarPastDue
+        DatesSection.TODAY -> MaterialTheme.appColors.datesSectionBarToday
+        DatesSection.THIS_WEEK -> MaterialTheme.appColors.datesSectionBarThisWeek
+        DatesSection.NEXT_WEEK -> MaterialTheme.appColors.datesSectionBarNextWeek
+        DatesSection.UPCOMING -> MaterialTheme.appColors.datesSectionBarUpcoming
+        else -> MaterialTheme.appColors.background
+    }
+    Box(
+        modifier = Modifier
+            .width(8.dp)
+            .fillMaxHeight()
+            .padding(top = 2.dp, bottom = 2.dp)
+            .background(
+                color = barColor, shape = MaterialTheme.shapes.medium
+            )
+    )
+}
+
+@Composable
+private fun DateBlock(
+    dateBlocks: List<CourseDateBlock>,
+    onItemClick: (String) -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+            .padding(start = 8.dp, end = 8.dp),
+    ) {
+        var lastAssignmentDate = dateBlocks.first().date.clearTime()
+        dateBlocks.forEachIndexed { index, dateBlock ->
+            var canShowDate = index == 0
+            if (index != 0) {
+                canShowDate = (lastAssignmentDate != dateBlock.date)
+            }
+            CourseDateItem(dateBlock, canShowDate, index != 0, onItemClick)
+            lastAssignmentDate = dateBlock.date
+        }
+    }
+}
+
+@Composable
+private fun CourseDateItem(
+    dateBlock: CourseDateBlock,
+    canShowDate: Boolean,
+    isMiddleChild: Boolean,
+    onItemClick: (String) -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .wrapContentHeight()
+            .fillMaxWidth()
+    ) {
+        if (isMiddleChild) {
+            Spacer(modifier = Modifier.height(20.dp))
+        }
+        if (canShowDate) {
+            val timeTitle = if (dateBlock.isTimeDifferenceLessThan24Hours()) {
+                TimeUtils.getFormattedTime(dateBlock.date)
+            } else {
+                TimeUtils.getCourseFormattedDate(LocalContext.current, dateBlock.date)
+            }
+            Text(
+                text = timeTitle,
+                style = MaterialTheme.appTypography.labelMedium,
+                color = MaterialTheme.appColors.textDark,
+                maxLines = 1,
+            )
+        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(end = 4.dp)
+                .clickable(enabled = dateBlock.blockId.isNotEmpty() && dateBlock.learnerHasAccess,
+                    onClick = { onItemClick(dateBlock.blockId) })
+        ) {
+            dateBlock.dateType.drawableResId?.let { icon ->
+                Icon(
+                    modifier = Modifier
+                        .padding(end = 4.dp)
+                        .align(Alignment.CenterVertically),
+                    painter = painterResource(id = if (dateBlock.learnerHasAccess.not()) coreR.drawable.core_ic_lock else icon),
+                    contentDescription = null,
+                    tint = MaterialTheme.appColors.textDark
+                )
+            }
+            Text(
+                modifier = Modifier
+                    .weight(1f)
+                    .align(Alignment.CenterVertically),
+                // append assignment type if available with title
+                text = if (dateBlock.assignmentType.isNullOrEmpty().not()) {
+                    "${dateBlock.assignmentType}: ${dateBlock.title}"
+                } else {
+                    dateBlock.title
+                },
+                style = MaterialTheme.appTypography.titleMedium,
+                color = MaterialTheme.appColors.textDark,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Spacer(modifier = Modifier.width(7.dp))
+
+            if (dateBlock.blockId.isNotEmpty() && dateBlock.learnerHasAccess) {
+                Icon(
+                    imageVector = Icons.Filled.KeyboardArrowRight,
+                    tint = MaterialTheme.appColors.textDark,
+                    contentDescription = "Open Block Arrow",
+                    modifier = Modifier
+                        .size(24.dp)
+                        .align(Alignment.CenterVertically)
+                )
+            }
+        }
+        if (dateBlock.description.isNotEmpty()) {
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(top = 4.dp),
+                text = dateBlock.description,
+                style = MaterialTheme.appTypography.labelMedium,
+            )
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun CourseDatesScreenPreview() {
+    OpenEdXTheme {
+        CourseDatesScreen(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            uiState = DatesUIState.Dates(CourseDatesResult(mockedResponse, mockedCourseBannerInfo)),
+            uiMessage = null,
+            isSelfPaced = true,
+            hasInternetConnection = true,
+            refreshing = false,
+            onSwipeRefresh = {},
+            onReloadClick = {},
+            onItemClick = {},
+            onSyncDates = {},
+        )
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, device = Devices.NEXUS_9)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, device = Devices.NEXUS_9)
+@Composable
+private fun CourseDatesScreenTabletPreview() {
+    OpenEdXTheme {
+        CourseDatesScreen(
+            windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
+            uiState = DatesUIState.Dates(CourseDatesResult(mockedResponse, mockedCourseBannerInfo)),
+            uiMessage = null,
+            isSelfPaced = true,
+            hasInternetConnection = true,
+            refreshing = false,
+            onSwipeRefresh = {},
+            onReloadClick = {},
+            onItemClick = {},
+            onSyncDates = {},
+        )
+    }
+}
+
+val mockedCourseBannerInfo = CourseDatesBannerInfo(
+    missedDeadlines = true,
+    missedGatedContent = false,
+    verifiedUpgradeLink = "",
+    contentTypeGatingEnabled = false,
+    hasEnded = false,
+)
+
+private val mockedResponse: LinkedHashMap<DatesSection, List<CourseDateBlock>> =
+    linkedMapOf(
+        Pair(
+            DatesSection.COMPLETED, listOf(
+                CourseDateBlock(
+                    title = "Homework 1: ABCD",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-20T15:08:07Z")!!,
+                )
+            )
+        ), Pair(
+            DatesSection.COMPLETED, listOf(
+                CourseDateBlock(
+                    title = "Homework 1: ABCD",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-20T15:08:07Z")!!,
+                )
+            )
+        ), Pair(
+            DatesSection.PAST_DUE, listOf(
+                CourseDateBlock(
+                    title = "Homework 1: ABCD",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-20T15:08:07Z")!!,
+                    dateType = DateType.ASSIGNMENT_DUE_DATE,
+                )
+            )
+        ), Pair(
+            DatesSection.TODAY, listOf(
+                CourseDateBlock(
+                    title = "Homework 2: ABCD",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-21T15:08:07Z")!!,
+                )
+            )
+        ), Pair(
+            DatesSection.THIS_WEEK, listOf(
+                CourseDateBlock(
+                    title = "Assignment Due: ABCD",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-22T15:08:07Z")!!,
+                    dateType = DateType.ASSIGNMENT_DUE_DATE,
+                ), CourseDateBlock(
+                    title = "Assignment Due",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-23T15:08:07Z")!!,
+                    dateType = DateType.ASSIGNMENT_DUE_DATE,
+                ), CourseDateBlock(
+                    title = "Surprise Assignment",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-24T15:08:07Z")!!,
+                )
+            )
+        ), Pair(
+            DatesSection.NEXT_WEEK, listOf(
+                CourseDateBlock(
+                    title = "Homework 5: ABCD",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-25T15:08:07Z")!!,
+                )
+            )
+        ), Pair(
+            DatesSection.UPCOMING, listOf(
+                CourseDateBlock(
+                    title = "Last Assignment",
+                    description = "After this date, course content will be archived",
+                    date = TimeUtils.iso8601ToDate("2023-10-26T15:08:07Z")!!,
+                    assignmentType = "Module 1",
+                    dateType = DateType.VERIFICATION_DEADLINE_DATE,
+                )
+            )
+        )
+    )
diff --git a/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesViewModel.kt b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesViewModel.kt
new file mode 100644
index 000000000..8d643de9d
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/dates/CourseDatesViewModel.kt
@@ -0,0 +1,113 @@
+package org.openedx.course.presentation.dates
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
+import org.openedx.core.BaseViewModel
+import org.openedx.core.R
+import org.openedx.core.SingleEventLiveData
+import org.openedx.core.UIMessage
+import org.openedx.core.domain.model.Block
+import org.openedx.core.extension.getSequentialBlocks
+import org.openedx.core.extension.getVerticalBlocks
+import org.openedx.core.extension.isInternetError
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.course.domain.interactor.CourseInteractor
+
+class CourseDatesViewModel(
+    val courseId: String,
+    val isSelfPaced: Boolean,
+    private val interactor: CourseInteractor,
+    private val networkConnection: NetworkConnection,
+    private val resourceManager: ResourceManager,
+) : BaseViewModel() {
+
+    private val _uiState = MutableLiveData<DatesUIState>(DatesUIState.Loading)
+    val uiState: LiveData<DatesUIState>
+        get() = _uiState
+
+    private val _uiMessage = SingleEventLiveData<UIMessage>()
+    val uiMessage: LiveData<UIMessage>
+        get() = _uiMessage
+
+    private val _updating = MutableLiveData<Boolean>()
+    val updating: LiveData<Boolean>
+        get() = _updating
+
+    val hasInternetConnection: Boolean
+        get() = networkConnection.isOnline()
+
+    init {
+        getCourseDates()
+    }
+
+    fun getCourseDates(swipeToRefresh: Boolean = false) {
+        if (!swipeToRefresh) {
+            _uiState.value = DatesUIState.Loading
+        }
+        _updating.value = swipeToRefresh
+        loadingCourseDatesInternal()
+    }
+
+    private fun loadingCourseDatesInternal() {
+        viewModelScope.launch {
+            try {
+                val datesResponse = interactor.getCourseDates(courseId = courseId)
+                if (datesResponse.datesSection.isEmpty()) {
+                    _uiState.value = DatesUIState.Empty
+                } else {
+                    _uiState.value = DatesUIState.Dates(datesResponse)
+                }
+            } catch (e: Exception) {
+                if (e.isInternetError()) {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_no_connection))
+                } else {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
+                }
+            }
+            _updating.value = false
+        }
+    }
+
+    fun resetCourseDatesBanner(onResetDates: (Boolean) -> Unit) {
+        viewModelScope.launch {
+            try {
+                interactor.resetCourseDates(courseId = courseId)
+                getCourseDates()
+                onResetDates(true)
+            } catch (e: Exception) {
+                if (e.isInternetError()) {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_no_connection))
+                } else {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
+                }
+                onResetDates(false)
+            }
+        }
+    }
+
+    fun getVerticalBlock(blockId: String): Block? {
+        return try {
+            val courseStructure = interactor.getCourseStructureFromCache()
+            courseStructure.blockData.getVerticalBlocks().find { it.descendants.contains(blockId) }
+        } catch (e: Exception) {
+            null
+        }
+    }
+
+    fun getSequentialBlock(blockId: String): Block? {
+        return try {
+            val courseStructure = interactor.getCourseStructureFromCache()
+            courseStructure.blockData.getSequentialBlocks()
+                .find { it.descendants.contains(blockId) }
+        } catch (e: Exception) {
+            null
+        }
+    }
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/dates/DashboardUIState.kt b/course/src/main/java/org/openedx/course/presentation/dates/DashboardUIState.kt
new file mode 100644
index 000000000..8ff75239f
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/dates/DashboardUIState.kt
@@ -0,0 +1,12 @@
+package org.openedx.course.presentation.dates
+
+import org.openedx.core.domain.model.CourseDatesResult
+
+sealed class DatesUIState {
+    data class Dates(
+        val courseDatesResult: CourseDatesResult,
+    ) : DatesUIState()
+
+    object Empty : DatesUIState()
+    object Loading : DatesUIState()
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsFragment.kt b/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsFragment.kt
index e08332d66..d7fe21eaa 100644
--- a/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsFragment.kt
@@ -36,7 +36,9 @@ import androidx.compose.ui.viewinterop.AndroidView
 import androidx.compose.ui.zIndex
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
-import org.openedx.core.BuildConfig
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.Course
 import org.openedx.core.domain.model.Media
@@ -50,9 +52,6 @@ import org.openedx.core.utils.EmailUtil
 import org.openedx.course.R
 import org.openedx.course.presentation.CourseRouter
 import org.openedx.course.presentation.ui.CourseImageHeader
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
 import java.nio.charset.StandardCharsets
 import java.util.*
 import org.openedx.course.R as courseR
@@ -84,11 +83,13 @@ class CourseDetailsFragment : Fragment() {
                     windowSize = windowSize,
                     uiState = uiState!!,
                     uiMessage = uiMessage,
+                    apiHostUrl = viewModel.apiHostUrl,
                     htmlBody = viewModel.getCourseAboutBody(
                         colorBackgroundValue,
                         colorTextValue
                     ),
                     hasInternetConnection = viewModel.hasInternetConnection,
+                    isUserLoggedIn = viewModel.isUserLoggedIn,
                     onReloadClick = {
                         viewModel.getCourseDetail()
                     },
@@ -98,18 +99,39 @@ class CourseDetailsFragment : Fragment() {
                     onButtonClick = {
                         val currentState = uiState
                         if (currentState is CourseDetailsUIState.CourseData) {
-                            if (currentState.course.isEnrolled) {
-                                viewModel.viewCourseClickedEvent(currentState.course.courseId, currentState.course.name)
-                                router.navigateToCourseOutline(
-                                    requireActivity().supportFragmentManager,
-                                    currentState.course.courseId,
-                                    currentState.course.name
-                                )
-                            } else {
-                                viewModel.enrollInACourse(currentState.course.courseId)
+                            when {
+                                (!currentState.isUserLoggedIn) -> {
+                                    router.navigateToLogistration(
+                                        parentFragmentManager,
+                                        currentState.course.courseId
+                                    )
+                                }
+
+                                currentState.course.isEnrolled -> {
+                                    viewModel.viewCourseClickedEvent(
+                                        currentState.course.courseId,
+                                        currentState.course.name
+                                    )
+                                    router.navigateToCourseOutline(
+                                        requireActivity().supportFragmentManager,
+                                        currentState.course.courseId,
+                                        currentState.course.name
+                                    )
+                                }
+
+                                else -> {
+                                    viewModel.enrollInACourse(currentState.course.courseId)
+                                }
                             }
                         }
-                    })
+                    },
+                    onRegisterClick = {
+                        router.navigateToSignUp(parentFragmentManager, viewModel.courseId)
+                    },
+                    onSignInClick = {
+                        router.navigateToSignIn(parentFragmentManager, viewModel.courseId)
+                    },
+                )
             }
         }
     }
@@ -132,11 +154,15 @@ internal fun CourseDetailsScreen(
     windowSize: WindowSize,
     uiState: CourseDetailsUIState,
     uiMessage: UIMessage?,
+    apiHostUrl: String,
     htmlBody: String,
     hasInternetConnection: Boolean,
+    isUserLoggedIn: Boolean,
     onReloadClick: () -> Unit,
     onBackClick: () -> Unit,
     onButtonClick: () -> Unit,
+    onRegisterClick: () -> Unit,
+    onSignInClick: () -> Unit,
 ) {
     val scaffoldState = rememberScaffoldState()
     val configuration = LocalConfiguration.current
@@ -150,7 +176,17 @@ internal fun CourseDetailsScreen(
             .fillMaxSize()
             .navigationBarsPadding(),
         scaffoldState = scaffoldState,
-        backgroundColor = MaterialTheme.appColors.background
+        backgroundColor = MaterialTheme.appColors.background,
+        bottomBar = {
+            if (!isUserLoggedIn) {
+                Box(modifier = Modifier.padding(horizontal = 16.dp, vertical = 32.dp)) {
+                    AuthButtonsPanel(
+                        onRegisterClick = onRegisterClick,
+                        onSignInClick = onSignInClick
+                    )
+                }
+            }
+        }
     ) {
 
         val screenWidth by remember(key1 = windowSize) {
@@ -181,7 +217,8 @@ internal fun CourseDetailsScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(it)
-                .statusBarsInset(),
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
             contentAlignment = Alignment.TopCenter
         ) {
             Column(
@@ -211,7 +248,6 @@ internal fun CourseDetailsScreen(
                 Spacer(Modifier.height(6.dp))
                 Box(
                     Modifier
-                        .padding(it)
                         .fillMaxSize()
                         .background(MaterialTheme.appColors.background),
                     contentAlignment = Alignment.TopCenter
@@ -227,11 +263,13 @@ internal fun CourseDetailsScreen(
                                 CircularProgressIndicator(color = MaterialTheme.appColors.primary)
                             }
                         }
+
                         is CourseDetailsUIState.CourseData -> {
                             Column(Modifier.verticalScroll(rememberScrollState())) {
                                 if (configuration.orientation == ORIENTATION_LANDSCAPE && windowSize.isTablet) {
                                     CourseDetailNativeContentLandscape(
                                         windowSize = windowSize,
+                                        apiHostUrl = apiHostUrl,
                                         course = uiState.course,
                                         onButtonClick = {
                                             onButtonClick()
@@ -240,6 +278,7 @@ internal fun CourseDetailsScreen(
                                 } else {
                                     CourseDetailNativeContent(
                                         windowSize = windowSize,
+                                        apiHostUrl = apiHostUrl,
                                         course = uiState.course,
                                         onButtonClick = {
                                             onButtonClick()
@@ -269,6 +308,7 @@ internal fun CourseDetailsScreen(
                                     ) {
                                         CourseDescription(
                                             paddingModifier = webViewPadding,
+                                            apiHostUrl = apiHostUrl,
                                             body = htmlBody,
                                             onWebPageLoaded = {
                                                 webViewAlpha = 1f
@@ -302,6 +342,7 @@ internal fun CourseDetailsScreen(
 @Composable
 private fun CourseDetailNativeContent(
     windowSize: WindowSize,
+    apiHostUrl: String,
     course: Course,
     onButtonClick: () -> Unit,
 ) {
@@ -336,8 +377,10 @@ private fun CourseDetailNativeContent(
                 modifier = Modifier
                     .aspectRatio(1.86f)
                     .padding(6.dp),
+                apiHostUrl = apiHostUrl,
                 courseImage = course.media.image?.large,
-                courseCertificate = null
+                courseCertificate = null,
+                courseName = course.name
             )
             if (!course.media.courseVideo?.uri.isNullOrEmpty()) {
                 IconButton(
@@ -348,7 +391,7 @@ private fun CourseDetailNativeContent(
                     Icon(
                         modifier = Modifier.size(40.dp),
                         painter = painterResource(courseR.drawable.course_ic_play),
-                        contentDescription = null,
+                        contentDescription = stringResource(id = R.string.course_accessibility_play_video),
                         tint = Color.LightGray
                     )
                 }
@@ -398,6 +441,7 @@ private fun CourseDetailNativeContent(
 @Composable
 private fun CourseDetailNativeContentLandscape(
     windowSize: WindowSize,
+    apiHostUrl: String,
     course: Course,
     onButtonClick: () -> Unit,
 ) {
@@ -465,8 +509,10 @@ private fun CourseDetailNativeContentLandscape(
                 modifier = Modifier
                     .width(263.dp)
                     .height(200.dp),
+                apiHostUrl = apiHostUrl,
                 courseImage = course.media.image?.large,
-                courseCertificate = null
+                courseCertificate = null,
+                courseName = course.name
             )
             if (!course.media.courseVideo?.uri.isNullOrEmpty()) {
                 IconButton(
@@ -538,6 +584,7 @@ private fun EnrollOverLabel() {
 @SuppressLint("SetJavaScriptEnabled")
 private fun CourseDescription(
     paddingModifier: Modifier,
+    apiHostUrl: String,
     body: String,
     onWebPageLoaded: () -> Unit
 ) {
@@ -585,7 +632,11 @@ private fun CourseDescription(
             isVerticalScrollBarEnabled = false
             isHorizontalScrollBarEnabled = false
             loadDataWithBaseURL(
-                org.openedx.core.BuildConfig.BASE_URL, body, "text/html", StandardCharsets.UTF_8.name(), null
+                apiHostUrl,
+                body,
+                "text/html",
+                StandardCharsets.UTF_8.name(),
+                null
             )
         }
     })
@@ -600,11 +651,15 @@ private fun CourseDetailNativeContentPreview() {
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
             uiState = CourseDetailsUIState.CourseData(mockCourse),
             uiMessage = null,
+            apiHostUrl = "http://localhost:8000",
             hasInternetConnection = false,
+            isUserLoggedIn = true,
             htmlBody = "<b>Preview text</b>",
             onReloadClick = {},
             onBackClick = {},
-            onButtonClick = {}
+            onButtonClick = {},
+            onRegisterClick = {},
+            onSignInClick = {},
         )
     }
 }
@@ -618,11 +673,15 @@ private fun CourseDetailNativeContentTabletPreview() {
             windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
             uiState = CourseDetailsUIState.CourseData(mockCourse),
             uiMessage = null,
+            apiHostUrl = "http://localhost:8000",
             hasInternetConnection = false,
+            isUserLoggedIn = true,
             htmlBody = "<b>Preview text</b>",
             onReloadClick = {},
             onBackClick = {},
-            onButtonClick = {}
+            onButtonClick = {},
+            onRegisterClick = {},
+            onSignInClick = {},
         )
     }
 }
diff --git a/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsUIState.kt b/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsUIState.kt
index 73257badd..480fd2edc 100644
--- a/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsUIState.kt
+++ b/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsUIState.kt
@@ -3,6 +3,8 @@ package org.openedx.course.presentation.detail
 import org.openedx.core.domain.model.Course
 
 sealed class CourseDetailsUIState {
-    data class CourseData(val course: Course) : CourseDetailsUIState()
+    data class CourseData(val course: Course, val isUserLoggedIn: Boolean = false) :
+        CourseDetailsUIState()
+
     object Loading : CourseDetailsUIState()
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsViewModel.kt b/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsViewModel.kt
index 1b94c2464..8a217de14 100644
--- a/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/detail/CourseDetailsViewModel.kt
@@ -3,10 +3,13 @@ package org.openedx.course.presentation.detail
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
 import org.openedx.core.BaseViewModel
 import org.openedx.core.R
 import org.openedx.core.SingleEventLiveData
 import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.Course
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.ResourceManager
@@ -15,16 +18,19 @@ import org.openedx.core.system.notifier.CourseDashboardUpdate
 import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.course.domain.interactor.CourseInteractor
 import org.openedx.course.presentation.CourseAnalytics
-import kotlinx.coroutines.launch
 
 class CourseDetailsViewModel(
-    private val courseId: String,
+    val courseId: String,
+    private val config: Config,
+    private val corePreferences: CorePreferences,
     private val networkConnection: NetworkConnection,
     private val interactor: CourseInteractor,
     private val resourceManager: ResourceManager,
     private val notifier: CourseNotifier,
     private val analytics: CourseAnalytics
 ) : BaseViewModel() {
+    val apiHostUrl get() = config.getApiHostURL()
+    val isUserLoggedIn get() = corePreferences.user != null
 
     private val _uiState = MutableLiveData<CourseDetailsUIState>(CourseDetailsUIState.Loading)
     val uiState: LiveData<CourseDetailsUIState>
@@ -46,12 +52,20 @@ class CourseDetailsViewModel(
         _uiState.value = CourseDetailsUIState.Loading
         viewModelScope.launch {
             try {
-                course = if (networkConnection.isOnline()) {
+                course = if (hasInternetConnection) {
                     interactor.getCourseDetails(courseId)
                 } else {
                     interactor.getCourseDetailsFromCache(courseId)
                 }
-                _uiState.value = CourseDetailsUIState.CourseData(course = course!!)
+                course?.let {
+                    _uiState.value = CourseDetailsUIState.CourseData(
+                        course = it,
+                        isUserLoggedIn = isUserLoggedIn
+                    )
+                } ?: run {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
+                }
             } catch (e: Exception) {
                 if (e.isInternetError()) {
                     _uiMessage.value =
@@ -124,4 +138,4 @@ class CourseDetailsViewModel(
     fun viewCourseClickedEvent(courseId: String, courseName: String) {
         analytics.viewCourseClickedEvent(courseId, courseName)
     }
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsFragment.kt b/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsFragment.kt
index c5fd806e8..8f49c86c0 100644
--- a/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsFragment.kt
@@ -19,22 +19,19 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
 import org.openedx.core.ui.*
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appTypography
 import org.openedx.course.presentation.CourseRouter
 import org.openedx.course.presentation.ui.CardArrow
-import org.koin.android.ext.android.inject
 import org.openedx.course.R as courseR
 
 class HandoutsFragment : Fragment() {
@@ -52,9 +49,6 @@ class HandoutsFragment : Fragment() {
                 val windowSize = rememberWindowSize()
                 HandoutsScreen(
                     windowSize = windowSize,
-                    onBackClick = {
-                        requireActivity().supportFragmentManager.popBackStack()
-                    },
                     onHandoutsClick = {
                         router.navigateToHandoutsWebView(
                             requireActivity().supportFragmentManager,
@@ -91,7 +85,6 @@ class HandoutsFragment : Fragment() {
 @Composable
 private fun HandoutsScreen(
     windowSize: WindowSize,
-    onBackClick: () -> Unit,
     onHandoutsClick: () -> Unit,
     onAnnouncementsClick: () -> Unit,
 ) {
@@ -116,55 +109,32 @@ private fun HandoutsScreen(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(it)
-                .statusBarsInset(),
+                .displayCutoutForLandscape(),
             contentAlignment = Alignment.TopCenter
         ) {
-            Column(screenWidth) {
-                Box(
-                    Modifier
-                        .fillMaxWidth()
-                        .zIndex(1f),
-                    contentAlignment = Alignment.CenterStart
+            Surface(
+                modifier = screenWidth,
+                color = MaterialTheme.appColors.background
+            ) {
+                LazyColumn(
+                    Modifier.fillMaxSize(),
+                    contentPadding = PaddingValues(vertical = 10.dp, horizontal = 24.dp)
                 ) {
-                    BackBtn {
-                        onBackClick()
+                    item {
+                        HandoutsItem(
+                            title = stringResource(id = courseR.string.course_handouts),
+                            description = stringResource(id = courseR.string.course_find_important_info),
+                            painter = painterResource(id = courseR.drawable.course_ic_handouts),
+                            onClick = onHandoutsClick
+                        )
                     }
-                    Text(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 56.dp),
-                        text = stringResource(id = courseR.string.course_handouts),
-                        color = MaterialTheme.appColors.textPrimary,
-                        style = MaterialTheme.appTypography.titleMedium,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                        textAlign = TextAlign.Center
-                    )
-                }
-                Spacer(Modifier.height(6.dp))
-                Surface(
-                    color = MaterialTheme.appColors.background
-                ) {
-                    LazyColumn(
-                        Modifier.fillMaxSize(),
-                        contentPadding = PaddingValues(vertical = 10.dp, horizontal = 24.dp)
-                    ) {
-                        item {
-                            HandoutsItem(
-                                title = stringResource(id = courseR.string.course_handouts),
-                                description = stringResource(id = courseR.string.course_find_important_info),
-                                painter = painterResource(id = courseR.drawable.course_ic_handouts),
-                                onClick = onHandoutsClick
-                            )
-                        }
-                        item {
-                            HandoutsItem(
-                                title = stringResource(id = courseR.string.course_announcements),
-                                description = stringResource(id = courseR.string.course_latest_news),
-                                painter = painterResource(id = courseR.drawable.course_ic_announcements),
-                                onClick = onAnnouncementsClick
-                            )
-                        }
+                    item {
+                        HandoutsItem(
+                            title = stringResource(id = courseR.string.course_announcements),
+                            description = stringResource(id = courseR.string.course_latest_news),
+                            painter = painterResource(id = courseR.drawable.course_ic_announcements),
+                            onClick = onAnnouncementsClick
+                        )
                     }
                 }
             }
@@ -221,7 +191,7 @@ private fun HandoutsScreenPreview() {
     OpenEdXTheme {
         HandoutsScreen(
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-            onBackClick = {}, onHandoutsClick = {}, onAnnouncementsClick = {})
+            onHandoutsClick = {}, onAnnouncementsClick = {})
     }
 }
 
@@ -232,6 +202,6 @@ private fun HandoutsScreenTabletPreview() {
     OpenEdXTheme {
         HandoutsScreen(
             windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
-            onBackClick = {}, onHandoutsClick = {}, onAnnouncementsClick = {})
+            onHandoutsClick = {}, onAnnouncementsClick = {})
     }
 }
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsViewModel.kt b/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsViewModel.kt
index 896988dbc..117e8130a 100644
--- a/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsViewModel.kt
@@ -3,18 +3,22 @@ package org.openedx.course.presentation.handouts
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
 import org.openedx.core.BaseViewModel
+import org.openedx.core.config.Config
 import org.openedx.core.domain.model.AnnouncementModel
 import org.openedx.core.domain.model.HandoutsModel
 import org.openedx.course.domain.interactor.CourseInteractor
-import kotlinx.coroutines.launch
 
 class HandoutsViewModel(
     private val courseId: String,
+    private val config: Config,
     private val handoutsType: String,
     private val interactor: CourseInteractor
 ) : BaseViewModel() {
 
+    val apiHostUrl get() = config.getApiHostURL()
+
     private val _htmlContent = MutableLiveData<String>()
     val htmlContent: LiveData<String>
         get() = _htmlContent
diff --git a/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsWebViewFragment.kt b/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsWebViewFragment.kt
new file mode 100644
index 000000000..cb1816b47
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/handouts/HandoutsWebViewFragment.kt
@@ -0,0 +1,106 @@
+package org.openedx.course.presentation.handouts
+
+import android.content.res.Configuration
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.openedx.core.ui.WebContentScreen
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+
+class HandoutsWebViewFragment : Fragment() {
+
+    private val viewModel by viewModel<HandoutsViewModel> {
+        parametersOf(
+            requireArguments().getString(ARG_COURSE_ID, ""),
+            requireArguments().getString(ARG_TYPE, "")
+        )
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val windowSize = rememberWindowSize()
+
+                val htmlBody by viewModel.htmlContent.observeAsState("")
+                val colorBackgroundValue = MaterialTheme.appColors.background.value
+                val colorTextValue = MaterialTheme.appColors.textPrimary.value
+
+                WebContentScreen(
+                    windowSize = windowSize,
+                    apiHostUrl = viewModel.apiHostUrl,
+                    title = requireArguments().getString(ARG_TITLE, ""),
+                    htmlBody = viewModel.injectDarkMode(
+                        htmlBody,
+                        colorBackgroundValue,
+                        colorTextValue
+                    ),
+                    onBackClick = {
+                        requireActivity().supportFragmentManager.popBackStack()
+                    })
+            }
+        }
+    }
+
+    companion object {
+        private val ARG_TITLE = "argTitle"
+        private val ARG_TYPE = "argType"
+        private val ARG_COURSE_ID = "argCourse"
+
+        fun newInstance(
+            title: String,
+            type: String,
+            courseId: String
+        ): HandoutsWebViewFragment {
+            val fragment = HandoutsWebViewFragment()
+            fragment.arguments = bundleOf(
+                ARG_TITLE to title,
+                ARG_TYPE to type,
+                ARG_COURSE_ID to courseId
+            )
+            return fragment
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun WebContentScreenPreview() {
+    WebContentScreen(
+        windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+        apiHostUrl = "http://localhost:8000",
+        title = "Handouts", onBackClick = { }, htmlBody = ""
+    )
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, device = Devices.NEXUS_9)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, device = Devices.NEXUS_9)
+@Composable
+fun WebContentScreenTabletPreview() {
+    WebContentScreen(
+        windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
+        apiHostUrl = "http://localhost:8000",
+        title = "Handouts", onBackClick = { }, htmlBody = ""
+    )
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/handouts/WebViewFragment.kt b/course/src/main/java/org/openedx/course/presentation/handouts/WebViewFragment.kt
deleted file mode 100644
index d342b2f40..000000000
--- a/course/src/main/java/org/openedx/course/presentation/handouts/WebViewFragment.kt
+++ /dev/null
@@ -1,279 +0,0 @@
-package org.openedx.course.presentation.handouts
-
-import android.annotation.SuppressLint
-import android.content.Intent
-import android.content.res.Configuration
-import android.net.Uri
-import android.os.Bundle
-import android.view.LayoutInflater
-import android.view.ViewGroup
-import android.webkit.WebResourceRequest
-import android.webkit.WebView
-import android.webkit.WebViewClient
-import androidx.compose.foundation.background
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
-import androidx.compose.runtime.*
-import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.ViewCompositionStrategy
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Devices
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.viewinterop.AndroidView
-import androidx.compose.ui.zIndex
-import androidx.core.os.bundleOf
-import androidx.fragment.app.Fragment
-import org.openedx.core.BuildConfig
-import org.openedx.core.extension.isEmailValid
-import org.openedx.core.extension.replaceLinkTags
-import org.openedx.core.ui.*
-import org.openedx.core.ui.theme.OpenEdXTheme
-import org.openedx.core.ui.theme.appColors
-import org.openedx.core.ui.theme.appTypography
-import org.openedx.core.utils.EmailUtil
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
-import java.nio.charset.StandardCharsets
-
-class WebViewFragment : Fragment() {
-
-    private val viewModel by viewModel<HandoutsViewModel> {
-        parametersOf(
-            requireArguments().getString(ARG_COURSE_ID, ""),
-            requireArguments().getString(ARG_TYPE, "")
-        )
-    }
-
-    override fun onCreateView(
-        inflater: LayoutInflater,
-        container: ViewGroup?,
-        savedInstanceState: Bundle?
-    ) = ComposeView(requireContext()).apply {
-        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
-        setContent {
-            OpenEdXTheme {
-                val windowSize = rememberWindowSize()
-
-                val htmlBody by viewModel.htmlContent.observeAsState("")
-                val colorBackgroundValue = MaterialTheme.appColors.background.value
-                val colorTextValue = MaterialTheme.appColors.textPrimary.value
-
-                WebContentScreen(
-                    windowSize = windowSize,
-                    title = requireArguments().getString(ARG_TITLE, ""),
-                    htmlBody = viewModel.injectDarkMode(
-                        htmlBody,
-                        colorBackgroundValue,
-                        colorTextValue
-                    ),
-                    onBackClick = {
-                        requireActivity().supportFragmentManager.popBackStack()
-                    })
-            }
-        }
-    }
-
-    companion object {
-        private val ARG_TITLE = "argTitle"
-        private val ARG_TYPE = "argType"
-        private val ARG_COURSE_ID = "argCourse"
-
-        fun newInstance(
-            title: String,
-            type: String,
-            courseId: String
-        ): WebViewFragment {
-            val fragment = WebViewFragment()
-            fragment.arguments = bundleOf(
-                ARG_TITLE to title,
-                ARG_TYPE to type,
-                ARG_COURSE_ID to courseId
-            )
-            return fragment
-        }
-    }
-}
-
-@Composable
-private fun WebContentScreen(
-    windowSize: WindowSize,
-    title: String,
-    onBackClick: () -> Unit,
-    htmlBody: String
-) {
-    val scaffoldState = rememberScaffoldState()
-    Scaffold(
-        modifier = Modifier
-            .fillMaxSize(),
-        scaffoldState = scaffoldState,
-        backgroundColor = MaterialTheme.appColors.background
-    ) {
-
-        val screenWidth by remember(key1 = windowSize) {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier.widthIn(Dp.Unspecified, 560.dp),
-                    compact = Modifier.fillMaxWidth()
-                )
-            )
-        }
-
-        Box(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(it)
-                .statusBarsInset(),
-            contentAlignment = Alignment.TopCenter
-        ) {
-            Column(screenWidth) {
-                Box(
-                    Modifier
-                        .fillMaxWidth()
-                        .zIndex(1f),
-                    contentAlignment = Alignment.CenterStart
-                ) {
-                    BackBtn {
-                        onBackClick()
-                    }
-
-                    Text(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 56.dp),
-                        text = title,
-                        color = MaterialTheme.appColors.textPrimary,
-                        style = MaterialTheme.appTypography.titleMedium,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                        textAlign = TextAlign.Center
-                    )
-                }
-                Spacer(Modifier.height(6.dp))
-                Surface(
-                    Modifier.fillMaxSize(),
-                    color = MaterialTheme.appColors.background
-                ) {
-                    if (htmlBody.isNotEmpty()) {
-                        var webViewAlpha by rememberSaveable { mutableStateOf(0f) }
-                        Surface(
-                            Modifier
-                                .padding(horizontal = 16.dp, vertical = 24.dp)
-                                .alpha(webViewAlpha),
-                            color = MaterialTheme.appColors.background
-                        ) {
-                            HandoutsContent(body = htmlBody, onWebPageLoaded = {
-                                webViewAlpha = 1f
-                            })
-                        }
-                    } else {
-                        Box(
-                            modifier = Modifier
-                                .fillMaxSize()
-                                .background(MaterialTheme.appColors.background)
-                                .zIndex(1f),
-                            contentAlignment = Alignment.Center
-                        ) {
-                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@Composable
-@SuppressLint("SetJavaScriptEnabled")
-private fun HandoutsContent(body: String, onWebPageLoaded: () -> Unit) {
-    val context = LocalContext.current
-    val isDarkTheme = isSystemInDarkTheme()
-    AndroidView(modifier = Modifier, factory = {
-        WebView(context).apply {
-            webViewClient = object : WebViewClient() {
-                override fun onPageCommitVisible(view: WebView?, url: String?) {
-                    super.onPageCommitVisible(view, url)
-                    onWebPageLoaded()
-                }
-
-                override fun shouldOverrideUrlLoading(
-                    view: WebView?,
-                    request: WebResourceRequest?
-                ): Boolean {
-                    val clickUrl = request?.url?.toString() ?: ""
-                    return if (clickUrl.isNotEmpty() &&
-                        (clickUrl.startsWith("http://") ||
-                                clickUrl.startsWith("https://"))
-                    ) {
-                        context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(clickUrl)))
-                        true
-                    } else if (clickUrl.startsWith("mailto:")) {
-                        val email = clickUrl.replace("mailto:", "")
-                        if (email.isEmailValid()) {
-                            EmailUtil.sendEmailIntent(context, email, "", "")
-                            true
-                        } else {
-                            false
-                        }
-                    } else {
-                        false
-                    }
-                }
-            }
-            with(settings) {
-                javaScriptEnabled = true
-                loadWithOverviewMode = true
-                builtInZoomControls = false
-                setSupportZoom(true)
-                loadsImagesAutomatically = true
-                domStorageEnabled = true
-            }
-            isVerticalScrollBarEnabled = false
-            isHorizontalScrollBarEnabled = false
-            loadDataWithBaseURL(
-                org.openedx.core.BuildConfig.BASE_URL,
-                body.replaceLinkTags(isDarkTheme),
-                "text/html",
-                StandardCharsets.UTF_8.name(),
-                null
-            )
-        }
-    }, update = {
-        it.loadDataWithBaseURL(
-            org.openedx.core.BuildConfig.BASE_URL,
-            body.replaceLinkTags(isDarkTheme),
-            "text/html",
-            StandardCharsets.UTF_8.name(),
-            null
-        )
-    })
-}
-
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-fun WebContentScreenPreview() {
-    WebContentScreen(
-        windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-        title = "Handouts", onBackClick = { }, htmlBody = ""
-    )
-}
-
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, device = Devices.NEXUS_9)
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, device = Devices.NEXUS_9)
-@Composable
-fun WebContentScreenTabletPreview() {
-    WebContentScreen(
-        windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
-        title = "Handouts", onBackClick = { }, htmlBody = ""
-    )
-}
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/info/CourseInfoFragment.kt b/course/src/main/java/org/openedx/course/presentation/info/CourseInfoFragment.kt
new file mode 100644
index 000000000..852b3a5ca
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/info/CourseInfoFragment.kt
@@ -0,0 +1,319 @@
+package org.openedx.course.presentation.info
+
+import android.annotation.SuppressLint
+import android.content.res.Configuration
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.compose.ui.zIndex
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.core.UIMessage
+import org.openedx.core.presentation.catalog.CatalogWebViewScreen
+import org.openedx.core.presentation.dialog.alert.ActionDialogFragment
+import org.openedx.core.presentation.dialog.alert.InfoDialogFragment
+import org.openedx.core.ui.ConnectionErrorView
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.Toolbar
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.course.R
+import org.openedx.core.R as CoreR
+import org.openedx.core.presentation.catalog.WebViewLink.Authority as linkAuthority
+
+class CourseInfoFragment : Fragment() {
+
+    private val viewModel by viewModel<CourseInfoViewModel>()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val uiMessage by viewModel.uiMessage.collectAsState(initial = null)
+                val showAlert by viewModel.showAlert.collectAsState(initial = false)
+                val enrollmentSuccess by viewModel.courseEnrollSuccess.collectAsState(initial = "")
+                val windowSize = rememberWindowSize()
+                var hasInternetConnection by remember {
+                    mutableStateOf(viewModel.hasInternetConnection)
+                }
+
+                LaunchedEffect(showAlert) {
+                    if (showAlert) {
+                        InfoDialogFragment.newInstance(
+                            title = context.getString(CoreR.string.core_enrollment_error),
+                            message = context.getString(
+                                CoreR.string.core_enrollment_error_message,
+                                getString(CoreR.string.platform_name)
+                            )
+                        ).show(
+                            requireActivity().supportFragmentManager,
+                            InfoDialogFragment::class.simpleName
+                        )
+                    }
+                }
+
+                LaunchedEffect(enrollmentSuccess) {
+                    if (enrollmentSuccess.isNotEmpty()) {
+                        viewModel.onSuccessfulCourseEnrollment(
+                            fragmentManager = requireActivity().supportFragmentManager,
+                            courseId = enrollmentSuccess,
+                        )
+                    }
+                }
+
+                CourseInfoScreen(
+                    windowSize = windowSize,
+                    uiMessage = uiMessage,
+                    contentUrl = getInitialUrl(),
+                    uriScheme = viewModel.uriScheme,
+                    hasInternetConnection = hasInternetConnection,
+                    checkInternetConnection = {
+                        hasInternetConnection = viewModel.hasInternetConnection
+                    },
+                    onBackClick = {
+                        requireActivity().supportFragmentManager.popBackStackImmediate()
+                    },
+                    onUriClick = { param, type ->
+                        when (type) {
+                            linkAuthority.PROGRAM_INFO,
+                            linkAuthority.COURSE_INFO -> {
+                                viewModel.infoCardClicked(
+                                    fragmentManager = requireActivity().supportFragmentManager,
+                                    pathId = param,
+                                    infoType = type.name
+                                )
+                            }
+
+                            linkAuthority.EXTERNAL -> {
+                                ActionDialogFragment.newInstance(
+                                    title = getString(CoreR.string.core_leaving_the_app),
+                                    message = getString(
+                                        CoreR.string.core_leaving_the_app_message,
+                                        getString(CoreR.string.platform_name)
+                                    ),
+                                    url = param,
+                                ).show(
+                                    requireActivity().supportFragmentManager,
+                                    ActionDialogFragment::class.simpleName
+                                )
+                            }
+
+                            linkAuthority.ENROLL -> {
+                                viewModel.enrollInACourse(param)
+                            }
+
+                            else -> {}
+                        }
+                    }
+                )
+            }
+        }
+    }
+
+    private fun getInitialUrl(): String {
+        return arguments?.let { args ->
+            val pathId = args.getString(ARG_PATH_ID) ?: ""
+            val urlTemplate = if (args.getString(ARG_INFO_TYPE) == linkAuthority.COURSE_INFO.name) {
+                viewModel.webViewConfig.courseUrlTemplate
+            } else {
+                viewModel.webViewConfig.programUrlTemplate
+            }
+            urlTemplate.replace("{$ARG_PATH_ID}", pathId)
+        } ?: viewModel.webViewConfig.baseUrl
+    }
+
+    companion object {
+        private const val ARG_PATH_ID = "path_id"
+        private const val ARG_INFO_TYPE = "info_type"
+
+        fun newInstance(
+            pathId: String,
+            infoType: String,
+        ): CourseInfoFragment {
+            val fragment = CourseInfoFragment()
+            fragment.arguments = bundleOf(
+                ARG_PATH_ID to pathId,
+                ARG_INFO_TYPE to infoType
+            )
+            return fragment
+        }
+    }
+}
+
+@Composable
+private fun CourseInfoScreen(
+    windowSize: WindowSize,
+    uiMessage: UIMessage?,
+    contentUrl: String,
+    uriScheme: String,
+    hasInternetConnection: Boolean,
+    checkInternetConnection: () -> Unit,
+    onBackClick: () -> Unit,
+    onUriClick: (String, linkAuthority) -> Unit,
+) {
+    val scaffoldState = rememberScaffoldState()
+    val configuration = LocalConfiguration.current
+    var isLoading by remember { mutableStateOf(true) }
+
+    HandleUIMessage(uiMessage = uiMessage, scaffoldState = scaffoldState)
+
+    Scaffold(
+        scaffoldState = scaffoldState,
+        modifier = Modifier.fillMaxSize(),
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+        val modifierScreenWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
+                        Modifier.widthIn(Dp.Unspecified, 560.dp)
+                    } else {
+                        Modifier.widthIn(Dp.Unspecified, 650.dp)
+                    },
+                    compact = Modifier.fillMaxWidth()
+                )
+            )
+        }
+
+        Column(
+            modifier = modifierScreenWidth
+                .fillMaxSize()
+                .padding(it)
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Toolbar(
+                label = stringResource(id = R.string.course_discover),
+                canShowBackBtn = true,
+                onBackClick = onBackClick
+            )
+
+            Surface {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(Color.White),
+                    contentAlignment = Alignment.TopCenter
+                ) {
+                    if (hasInternetConnection) {
+                        CourseInfoWebView(
+                            contentUrl = contentUrl,
+                            uriScheme = uriScheme,
+                            onWebPageLoaded = { isLoading = false },
+                            onUriClick = onUriClick,
+                        )
+                    } else {
+                        ConnectionErrorView(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .fillMaxHeight()
+                                .background(MaterialTheme.appColors.background)
+                        ) {
+                            checkInternetConnection()
+                        }
+                    }
+                    if (isLoading && hasInternetConnection) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .zIndex(1f),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+@SuppressLint("SetJavaScriptEnabled")
+private fun CourseInfoWebView(
+    contentUrl: String,
+    uriScheme: String,
+    onWebPageLoaded: () -> Unit,
+    onUriClick: (String, linkAuthority) -> Unit,
+) {
+
+    val webView = CatalogWebViewScreen(
+        url = contentUrl,
+        uriScheme = uriScheme,
+        isAllLinksExternal = true,
+        onWebPageLoaded = onWebPageLoaded,
+        onUriClick = onUriClick,
+    )
+
+    AndroidView(
+        modifier = Modifier
+            .background(MaterialTheme.appColors.background),
+        factory = {
+            webView
+        },
+        update = {
+            webView.loadUrl(contentUrl)
+        }
+    )
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun CourseInfoScreenPreview() {
+    OpenEdXTheme {
+        CourseInfoScreen(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            uiMessage = null,
+            contentUrl = "https://www.example.com/",
+            uriScheme = "",
+            hasInternetConnection = false,
+            checkInternetConnection = {},
+            onBackClick = {},
+            onUriClick = { _, _ -> },
+        )
+    }
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/info/CourseInfoViewModel.kt b/course/src/main/java/org/openedx/course/presentation/info/CourseInfoViewModel.kt
new file mode 100644
index 000000000..a70411049
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/info/CourseInfoViewModel.kt
@@ -0,0 +1,99 @@
+package org.openedx.course.presentation.info
+
+import androidx.fragment.app.FragmentManager
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.SharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.launch
+import org.openedx.core.BaseViewModel
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.extension.isInternetError
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.CourseDashboardUpdate
+import org.openedx.core.system.notifier.CourseNotifier
+import org.openedx.course.R
+import org.openedx.course.domain.interactor.CourseInteractor
+import org.openedx.course.presentation.CourseRouter
+import org.openedx.core.R as CoreR
+
+class CourseInfoViewModel(
+    private val config: Config,
+    private val networkConnection: NetworkConnection,
+    private val router: CourseRouter,
+    private val interactor: CourseInteractor,
+    private val notifier: CourseNotifier,
+    private val resourceManager: ResourceManager,
+) : BaseViewModel() {
+
+    private val _uiMessage = MutableSharedFlow<UIMessage>()
+    val uiMessage: SharedFlow<UIMessage>
+        get() = _uiMessage.asSharedFlow()
+
+    private val _showAlert = MutableSharedFlow<Boolean>()
+    val showAlert: SharedFlow<Boolean>
+        get() = _showAlert.asSharedFlow()
+
+    private val _courseEnrollSuccess = MutableSharedFlow<String>()
+    val courseEnrollSuccess: SharedFlow<String>
+        get() = _courseEnrollSuccess.asSharedFlow()
+
+    val hasInternetConnection: Boolean
+        get() = networkConnection.isOnline()
+
+    val uriScheme: String get() = config.getUriScheme()
+
+    val webViewConfig get() = config.getDiscoveryConfig().webViewConfig
+
+    fun enrollInACourse(courseId: String) {
+        viewModelScope.launch {
+            _showAlert.emit(false)
+            try {
+                val isCourseEnrolled = interactor.getEnrolledCourseFromCacheById(courseId) != null
+
+                if (isCourseEnrolled) {
+                    _uiMessage.emit(
+                        UIMessage.ToastMessage(resourceManager.getString(R.string.course_you_are_already_enrolled))
+                    )
+                    _courseEnrollSuccess.emit(courseId)
+                    return@launch
+                }
+
+                interactor.enrollInACourse(courseId)
+                notifier.send(CourseDashboardUpdate())
+                _courseEnrollSuccess.emit(courseId)
+
+            } catch (e: Exception) {
+                if (e.isInternetError()) {
+                    _uiMessage.emit(
+                        UIMessage.SnackBarMessage(resourceManager.getString(CoreR.string.core_error_no_connection))
+                    )
+                } else {
+                    _showAlert.emit(true)
+                }
+            }
+        }
+    }
+
+    fun onSuccessfulCourseEnrollment(fragmentManager: FragmentManager, courseId: String) {
+        if (courseId.isNotEmpty()) {
+            router.navigateToCourseOutline(
+                fm = fragmentManager,
+                courseId = courseId,
+                courseTitle = ""
+            )
+        }
+    }
+
+    fun infoCardClicked(fragmentManager: FragmentManager, pathId: String, infoType: String) {
+        if (pathId.isNotEmpty() && infoType.isNotEmpty()) {
+            router.navigateToCourseInfo(
+                fm = fragmentManager,
+                courseId = pathId,
+                infoType = infoType
+            )
+        }
+    }
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineFragment.kt b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineFragment.kt
index b0e2586a5..e760400e9 100644
--- a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineFragment.kt
@@ -5,50 +5,92 @@ import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import androidx.compose.foundation.layout.*
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.*
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Divider
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
 import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
-import androidx.compose.runtime.*
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import com.google.android.material.snackbar.Snackbar
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.BlockType
 import org.openedx.core.R
 import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.*
+import org.openedx.core.domain.model.Block
+import org.openedx.core.domain.model.BlockCounts
+import org.openedx.core.domain.model.CourseDatesBannerInfo
+import org.openedx.core.domain.model.CourseStructure
+import org.openedx.core.domain.model.CoursewareAccess
 import org.openedx.core.presentation.course.CourseViewMode
-import org.openedx.core.ui.*
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.OfflineModeDialog
+import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.TextIcon
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
 import org.openedx.course.presentation.CourseRouter
 import org.openedx.course.presentation.container.CourseContainerFragment
+import org.openedx.course.presentation.container.CourseContainerTab
 import org.openedx.course.presentation.outline.CourseOutlineFragment.Companion.getUnitBlockIcon
+import org.openedx.course.presentation.ui.CourseDatesBanner
+import org.openedx.course.presentation.ui.CourseDatesBannerTablet
+import org.openedx.course.presentation.ui.CourseExpandableChapterCard
 import org.openedx.course.presentation.ui.CourseImageHeader
 import org.openedx.course.presentation.ui.CourseSectionCard
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
+import org.openedx.course.presentation.ui.CourseSubSectionItem
 import java.io.File
-import java.util.*
+import java.util.Date
 
 class CourseOutlineFragment : Fragment() {
 
@@ -57,6 +99,8 @@ class CourseOutlineFragment : Fragment() {
     }
     private val router by inject<CourseRouter>()
 
+    private var snackBar: Snackbar? = null
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         lifecycle.addObserver(viewModel)
@@ -75,14 +119,16 @@ class CourseOutlineFragment : Fragment() {
             OpenEdXTheme {
                 val windowSize = rememberWindowSize()
 
-                val uiState by viewModel.uiState.observeAsState()
+                val uiState by viewModel.uiState.observeAsState(CourseOutlineUIState.Loading)
                 val uiMessage by viewModel.uiMessage.observeAsState()
                 val refreshing by viewModel.isUpdating.observeAsState(false)
 
                 CourseOutlineScreen(
                     windowSize = windowSize,
-                    uiState = uiState!!,
-                    courseTitle = viewModel.courseTitle,
+                    uiState = uiState,
+                    apiHostUrl = viewModel.apiHostUrl,
+                    isCourseNestedListEnabled = viewModel.isCourseNestedListEnabled,
+                    isCourseBannerEnabled = viewModel.isCourseBannerEnabled,
                     uiMessage = uiMessage,
                     refreshing = refreshing,
                     onSwipeRefresh = {
@@ -96,27 +142,42 @@ class CourseOutlineFragment : Fragment() {
                     onItemClick = { block ->
                         viewModel.sequentialClickedEvent(block.blockId, block.displayName)
                         router.navigateToCourseSubsections(
-                            requireActivity().supportFragmentManager,
+                            fm = requireActivity().supportFragmentManager,
                             courseId = viewModel.courseId,
-                            blockId = block.id,
-                            title = block.displayName,
+                            subSectionId = block.id,
                             mode = CourseViewMode.FULL
                         )
                     },
-                    onResumeClick = { blockId ->
-                        viewModel.resumeSectionBlock?.let { sequential ->
-                            viewModel.resumeCourseTappedEvent(sequential.blockId)
-                            router.navigateToCourseSubsections(
+                    onExpandClick = { block ->
+                        if (viewModel.switchCourseSections(block.id)) {
+                            viewModel.sequentialClickedEvent(block.blockId, block.displayName)
+                        }
+                    },
+                    onSubSectionClick = { subSectionBlock ->
+                        viewModel.courseSubSectionUnit[subSectionBlock.id]?.let { unit ->
+                            viewModel.verticalClickedEvent(unit.blockId, unit.displayName)
+                            router.navigateToCourseContainer(
                                 requireActivity().supportFragmentManager,
-                                viewModel.courseId,
-                                sequential.id,
-                                sequential.displayName,
-                                CourseViewMode.FULL
+                                courseId = viewModel.courseId,
+                                unitId = unit.id,
+                                mode = CourseViewMode.FULL
                             )
                         }
                     },
-                    onBackClick = {
-                        requireActivity().supportFragmentManager.popBackStack()
+                    onResumeClick = { componentId ->
+                        viewModel.resumeSectionBlock?.let { subSection ->
+                            viewModel.resumeCourseTappedEvent(subSection.id)
+                            viewModel.resumeVerticalBlock?.let { unit ->
+                                router.navigateToCourseSubsections(
+                                    requireActivity().supportFragmentManager,
+                                    courseId = viewModel.courseId,
+                                    subSectionId = subSection.id,
+                                    mode = CourseViewMode.FULL,
+                                    unitId = unit.id,
+                                    componentId = componentId
+                                )
+                            }
+                        }
                     },
                     onDownloadClick = {
                         if (viewModel.isBlockDownloading(it.id)) {
@@ -132,12 +193,41 @@ class CourseOutlineFragment : Fragment() {
                                             .replace(Regex("\\s"), "_"), it.id
                             )
                         }
+                    },
+                    onResetDatesClick = {
+                        viewModel.resetCourseDatesBanner(onResetDates = {
+                            (parentFragment as CourseContainerFragment).updateCourseDates()
+                            showDatesUpdateSnackbar(it)
+                        })
                     }
                 )
             }
         }
     }
 
+    override fun onDestroyView() {
+        snackBar?.dismiss()
+        super.onDestroyView()
+    }
+
+    private fun showDatesUpdateSnackbar(isSuccess: Boolean) {
+        val message = if (isSuccess) {
+            getString(R.string.core_dates_shift_dates_successfully_msg)
+        } else {
+            getString(R.string.core_dates_shift_dates_unsuccessful_msg)
+        }
+        snackBar = view?.let {
+            Snackbar.make(it, message, Snackbar.LENGTH_LONG).apply {
+                if (isSuccess) {
+                    setAction(R.string.core_dates_view_all_dates) {
+                        (parentFragment as CourseContainerFragment).navigateToTab(CourseContainerTab.DATES)
+                    }
+                }
+            }
+        }
+        snackBar?.show()
+    }
+
 
     companion object {
         private const val ARG_COURSE_ID = "courseId"
@@ -171,16 +261,20 @@ class CourseOutlineFragment : Fragment() {
 internal fun CourseOutlineScreen(
     windowSize: WindowSize,
     uiState: CourseOutlineUIState,
-    courseTitle: String,
+    apiHostUrl: String,
+    isCourseNestedListEnabled: Boolean,
+    isCourseBannerEnabled: Boolean,
     uiMessage: UIMessage?,
     refreshing: Boolean,
     hasInternetConnection: Boolean,
     onReloadClick: () -> Unit,
     onSwipeRefresh: () -> Unit,
     onItemClick: (Block) -> Unit,
+    onExpandClick: (Block) -> Unit,
+    onSubSectionClick: (Block) -> Unit,
     onResumeClick: (String) -> Unit,
-    onBackClick: () -> Unit,
-    onDownloadClick: (Block) -> Unit
+    onDownloadClick: (Block) -> Unit,
+    onResetDatesClick: () -> Unit,
 ) {
     val scaffoldState = rememberScaffoldState()
     val pullRefreshState =
@@ -230,128 +324,179 @@ internal fun CourseOutlineScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(it)
-                .statusBarsInset(),
+                .displayCutoutForLandscape(),
             contentAlignment = Alignment.TopCenter
         ) {
-            Column(
-                screenWidth
+            Surface(
+                modifier = screenWidth,
+                color = MaterialTheme.appColors.background
             ) {
-                Box(
-                    Modifier
-                        .fillMaxWidth()
-                        .zIndex(1f),
-                    contentAlignment = Alignment.CenterStart
-                ) {
-                    BackBtn {
-                        onBackClick()
-                    }
-                    Text(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 56.dp),
-                        text = courseTitle,
-                        color = MaterialTheme.appColors.textPrimary,
-                        style = MaterialTheme.appTypography.titleMedium,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                        textAlign = TextAlign.Center
-                    )
-                }
-                Spacer(Modifier.height(6.dp))
-                Surface(
-                    color = MaterialTheme.appColors.background
-                ) {
-                    Box(Modifier.pullRefresh(pullRefreshState)) {
-                        when (uiState) {
-                            is CourseOutlineUIState.Loading -> {
-                                Box(
-                                    modifier = Modifier.fillMaxSize(),
-                                    contentAlignment = Alignment.Center
-                                ) {
-                                    CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-                                }
+                Box(Modifier.pullRefresh(pullRefreshState)) {
+                    when (uiState) {
+                        is CourseOutlineUIState.Loading -> {
+                            Box(
+                                modifier = Modifier.fillMaxSize(),
+                                contentAlignment = Alignment.Center
+                            ) {
+                                CircularProgressIndicator(color = MaterialTheme.appColors.primary)
                             }
+                        }
 
-                            is CourseOutlineUIState.CourseData -> {
-                                LazyColumn(
-                                    modifier = Modifier.fillMaxSize(),
-                                    contentPadding = listBottomPadding
-                                ) {
+                        is CourseOutlineUIState.CourseData -> {
+                            LazyColumn(
+                                modifier = Modifier.fillMaxSize(),
+                                contentPadding = listBottomPadding
+                            ) {
+                                if (isCourseBannerEnabled) {
                                     item {
                                         CourseImageHeader(
                                             modifier = Modifier
                                                 .aspectRatio(1.86f)
                                                 .padding(6.dp),
+                                            apiHostUrl = apiHostUrl,
                                             courseImage = uiState.courseStructure.media?.image?.large
                                                 ?: "",
-                                            courseCertificate = uiState.courseStructure.certificate
+                                            courseCertificate = uiState.courseStructure.certificate,
+                                            courseName = uiState.courseStructure.name
                                         )
                                     }
-                                    if (uiState.resumeBlock != null) {
-                                        item {
-                                            Spacer(Modifier.height(28.dp))
-                                            Box(listPadding) {
-                                                if (windowSize.isTablet) {
-                                                    ResumeCourseTablet(
-                                                        block = uiState.resumeBlock,
-                                                        onResumeClick = onResumeClick
-                                                    )
-                                                } else {
-                                                    ResumeCourse(
-                                                        block = uiState.resumeBlock,
-                                                        onResumeClick = onResumeClick
-                                                    )
-                                                }
+                                }
+                                item { Spacer(Modifier.height(28.dp)) }
+                                if (uiState.datesBannerInfo.isBannerAvailableForDashboard()) {
+                                    item {
+                                        Box(
+                                            modifier = Modifier
+                                                .padding(all = 8.dp)
+                                        ) {
+                                            if (windowSize.isTablet) {
+                                                CourseDatesBannerTablet(
+                                                    modifier = Modifier.padding(bottom = 16.dp),
+                                                    banner = uiState.datesBannerInfo,
+                                                    resetDates = onResetDatesClick,
+                                                )
+                                            } else {
+                                                CourseDatesBanner(
+                                                    modifier = Modifier.padding(bottom = 16.dp),
+                                                    banner = uiState.datesBannerInfo,
+                                                    resetDates = onResetDatesClick,
+                                                )
                                             }
                                         }
                                     }
-                                    items(uiState.courseStructure.blockData) { block ->
-                                        Column(listPadding) {
-                                            if (block.type == BlockType.CHAPTER) {
-                                                Text(
-                                                    modifier = Modifier.padding(
-                                                        top = 36.dp,
-                                                        bottom = 8.dp
-                                                    ),
-                                                    text = block.displayName,
-                                                    style = MaterialTheme.appTypography.titleMedium,
-                                                    color = MaterialTheme.appColors.textPrimaryVariant
+                                }
+                                if (uiState.resumeComponent != null) {
+                                    item {
+                                        Box(listPadding) {
+                                            if (windowSize.isTablet) {
+                                                ResumeCourseTablet(
+                                                    block = uiState.resumeComponent,
+                                                    onResumeClick = onResumeClick
                                                 )
                                             } else {
-                                                CourseSectionCard(
-                                                    block = block,
-                                                    downloadedState = uiState.downloadedState[block.id],
-                                                    onItemClick = { blockSelected ->
-                                                        onItemClick(blockSelected)
-                                                    },
-                                                    onDownloadClick = onDownloadClick
+                                                ResumeCourse(
+                                                    block = uiState.resumeComponent,
+                                                    onResumeClick = onResumeClick
+                                                )
+                                            }
+                                        }
+                                    }
+                                }
+
+                                if (isCourseNestedListEnabled) {
+                                    item {
+                                        Spacer(Modifier.height(16.dp))
+                                    }
+                                    uiState.courseStructure.blockData.forEach { section ->
+                                        val courseSubSections =
+                                            uiState.courseSubSections[section.id]
+                                        val courseSectionsState =
+                                            uiState.courseSectionsState[section.id]
+
+                                        item {
+                                            Column {
+                                                CourseExpandableChapterCard(
+                                                    modifier = listPadding,
+                                                    block = section,
+                                                    onItemClick = onExpandClick,
+                                                    arrowDegrees = if (courseSectionsState == true) -90f else 90f
                                                 )
                                                 Divider()
                                             }
                                         }
+
+                                        courseSubSections?.forEach { subSectionBlock ->
+                                            item {
+                                                Column {
+                                                    AnimatedVisibility(
+                                                        visible = courseSectionsState == true
+                                                    ) {
+                                                        Column {
+                                                            val downloadsCount =
+                                                                uiState.subSectionsDownloadsCount[subSectionBlock.id]
+                                                                    ?: 0
+
+                                                            CourseSubSectionItem(
+                                                                modifier = listPadding,
+                                                                block = subSectionBlock,
+                                                                downloadedState = uiState.downloadedState[subSectionBlock.id],
+                                                                downloadsCount = downloadsCount,
+                                                                onClick = onSubSectionClick,
+                                                                onDownloadClick = onDownloadClick
+                                                            )
+                                                            Divider()
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                    return@LazyColumn
+                                }
+
+                                items(uiState.courseStructure.blockData) { block ->
+                                    Column(listPadding) {
+                                        if (block.type == BlockType.CHAPTER) {
+                                            Text(
+                                                modifier = Modifier.padding(
+                                                    top = 36.dp,
+                                                    bottom = 8.dp
+                                                ),
+                                                text = block.displayName,
+                                                style = MaterialTheme.appTypography.titleMedium,
+                                                color = MaterialTheme.appColors.textPrimaryVariant
+                                            )
+                                        } else {
+                                            CourseSectionCard(
+                                                block = block,
+                                                downloadedState = uiState.downloadedState[block.id],
+                                                onItemClick = onItemClick,
+                                                onDownloadClick = onDownloadClick
+                                            )
+                                            Divider()
+                                        }
                                     }
                                 }
                             }
                         }
-                        PullRefreshIndicator(
-                            refreshing,
-                            pullRefreshState,
-                            Modifier.align(Alignment.TopCenter)
+                    }
+                    PullRefreshIndicator(
+                        refreshing,
+                        pullRefreshState,
+                        Modifier.align(Alignment.TopCenter)
+                    )
+                    if (!isInternetConnectionShown && !hasInternetConnection) {
+                        OfflineModeDialog(
+                            Modifier
+                                .fillMaxWidth()
+                                .align(Alignment.BottomCenter),
+                            onDismissCLick = {
+                                isInternetConnectionShown = true
+                            },
+                            onReloadClick = {
+                                isInternetConnectionShown = true
+                                onReloadClick()
+                            }
                         )
-                        if (!isInternetConnectionShown && !hasInternetConnection) {
-                            OfflineModeDialog(
-                                Modifier
-                                    .fillMaxWidth()
-                                    .align(Alignment.BottomCenter),
-                                onDismissCLick = {
-                                    isInternetConnectionShown = true
-                                },
-                                onReloadClick = {
-                                    isInternetConnectionShown = true
-                                    onReloadClick()
-                                }
-                            )
-                        }
                     }
                 }
             }
@@ -393,13 +538,13 @@ private fun ResumeCourse(
         }
         Spacer(Modifier.height(24.dp))
         OpenEdXButton(
-            text = stringResource(id = org.openedx.course.R.string.course_continue),
+            text = stringResource(id = org.openedx.course.R.string.course_resume),
             onClick = {
                 onResumeClick(block.id)
             },
             content = {
                 TextIcon(
-                    text = stringResource(id = org.openedx.course.R.string.course_continue),
+                    text = stringResource(id = org.openedx.course.R.string.course_resume),
                     painter = painterResource(id = R.drawable.core_ic_forward),
                     color = MaterialTheme.appColors.buttonText,
                     textStyle = MaterialTheme.appTypography.labelLarge
@@ -450,14 +595,14 @@ private fun ResumeCourseTablet(
             }
         }
         OpenEdXButton(
-            width = Modifier.width(194.dp),
-            text = stringResource(id = org.openedx.course.R.string.course_continue),
+            width = Modifier.width(210.dp),
+            text = stringResource(id = org.openedx.course.R.string.course_resume),
             onClick = {
                 onResumeClick(block.id)
             },
             content = {
                 TextIcon(
-                    text = stringResource(id = org.openedx.course.R.string.course_continue),
+                    text = stringResource(id = org.openedx.course.R.string.course_resume),
                     painter = painterResource(id = R.drawable.core_ic_forward),
                     color = MaterialTheme.appColors.buttonText,
                     textStyle = MaterialTheme.appTypography.labelLarge
@@ -477,18 +622,32 @@ private fun CourseOutlineScreenPreview() {
             uiState = CourseOutlineUIState.CourseData(
                 mockCourseStructure,
                 mapOf(),
-                mockChapterBlock
+                mockChapterBlock,
+                mapOf(),
+                mapOf(),
+                mapOf(),
+                CourseDatesBannerInfo(
+                    missedDeadlines = false,
+                    missedGatedContent = false,
+                    verifiedUpgradeLink = "",
+                    contentTypeGatingEnabled = false,
+                    hasEnded = false
+                )
             ),
-            courseTitle = "",
+            apiHostUrl = "",
+            isCourseNestedListEnabled = true,
+            isCourseBannerEnabled = true,
             uiMessage = null,
             refreshing = false,
             hasInternetConnection = true,
             onSwipeRefresh = {},
             onItemClick = {},
+            onExpandClick = {},
+            onSubSectionClick = {},
             onResumeClick = {},
-            onBackClick = {},
             onReloadClick = {},
-            onDownloadClick = {}
+            onDownloadClick = {},
+            onResetDatesClick = {},
         )
     }
 }
@@ -503,18 +662,32 @@ private fun CourseOutlineScreenTabletPreview() {
             uiState = CourseOutlineUIState.CourseData(
                 mockCourseStructure,
                 mapOf(),
-                mockChapterBlock
+                mockChapterBlock,
+                mapOf(),
+                mapOf(),
+                mapOf(),
+                CourseDatesBannerInfo(
+                    missedDeadlines = false,
+                    missedGatedContent = false,
+                    verifiedUpgradeLink = "",
+                    contentTypeGatingEnabled = false,
+                    hasEnded = false
+                )
             ),
-            courseTitle = "",
+            apiHostUrl = "",
+            isCourseNestedListEnabled = true,
+            isCourseBannerEnabled = true,
             uiMessage = null,
             refreshing = false,
             hasInternetConnection = true,
             onSwipeRefresh = {},
             onItemClick = {},
+            onExpandClick = {},
+            onSubSectionClick = {},
             onResumeClick = {},
-            onBackClick = {},
             onReloadClick = {},
-            onDownloadClick = {}
+            onDownloadClick = {},
+            onResetDatesClick = {},
         )
     }
 }
@@ -541,7 +714,9 @@ private val mockChapterBlock = Block(
     studentViewMultiDevice = false,
     blockCounts = BlockCounts(1),
     descendants = emptyList(),
-    completion = 0.0
+    descendantsType = BlockType.CHAPTER,
+    completion = 0.0,
+    containsGatedContent = false
 )
 private val mockSequentialBlock = Block(
     id = "id",
@@ -556,7 +731,9 @@ private val mockSequentialBlock = Block(
     studentViewMultiDevice = false,
     blockCounts = BlockCounts(1),
     descendants = emptyList(),
-    completion = 0.0
+    descendantsType = BlockType.CHAPTER,
+    completion = 0.0,
+    containsGatedContent = false
 )
 
 private val mockCourseStructure = CourseStructure(
diff --git a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineUIState.kt b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineUIState.kt
index 6d8c545e5..8b29be31e 100644
--- a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineUIState.kt
+++ b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineUIState.kt
@@ -1,6 +1,7 @@
 package org.openedx.course.presentation.outline
 
 import org.openedx.core.domain.model.Block
+import org.openedx.core.domain.model.CourseDatesBannerInfo
 import org.openedx.core.domain.model.CourseStructure
 import org.openedx.core.module.db.DownloadedState
 
@@ -8,7 +9,11 @@ sealed class CourseOutlineUIState {
     data class CourseData(
         val courseStructure: CourseStructure,
         val downloadedState: Map<String, DownloadedState>,
-        val resumeBlock: Block?
+        val resumeComponent: Block?,
+        val courseSubSections: Map<String, List<Block>>,
+        val courseSectionsState: Map<String, Boolean>,
+        val subSectionsDownloadsCount: Map<String, Int>,
+        val datesBannerInfo: CourseDatesBannerInfo,
     ) : CourseOutlineUIState()
 
     object Loading : CourseOutlineUIState()
diff --git a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineViewModel.kt b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineViewModel.kt
index dd31e52a1..361e04be0 100644
--- a/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/outline/CourseOutlineViewModel.kt
@@ -4,13 +4,18 @@ import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
 import org.openedx.core.BlockType
 import org.openedx.core.R
 import org.openedx.core.SingleEventLiveData
 import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.Block
 import org.openedx.core.domain.model.CourseComponentStatus
+import org.openedx.core.domain.model.CourseDatesBannerInfo
+import org.openedx.core.extension.getSequentialBlocks
+import org.openedx.core.extension.getVerticalBlocks
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.module.DownloadWorkerController
 import org.openedx.core.module.db.DownloadDao
@@ -21,11 +26,11 @@ import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.core.system.notifier.CourseStructureUpdated
 import org.openedx.course.domain.interactor.CourseInteractor
 import org.openedx.course.presentation.CourseAnalytics
-import kotlinx.coroutines.launch
 import org.openedx.course.R as courseR
 
 class CourseOutlineViewModel(
     val courseId: String,
+    private val config: Config,
     private val interactor: CourseInteractor,
     private val resourceManager: ResourceManager,
     private val notifier: CourseNotifier,
@@ -36,6 +41,12 @@ class CourseOutlineViewModel(
     workerController: DownloadWorkerController
 ) : BaseDownloadViewModel(downloadDao, preferencesManager, workerController) {
 
+    val apiHostUrl get() = config.getApiHostURL()
+
+    val isCourseNestedListEnabled get() = config.isCourseNestedListEnabled()
+
+    val isCourseBannerEnabled get() = config.isCourseBannerEnabled()
+
     private val _uiState = MutableLiveData<CourseOutlineUIState>(CourseOutlineUIState.Loading)
     val uiState: LiveData<CourseOutlineUIState>
         get() = _uiState
@@ -58,6 +69,10 @@ class CourseOutlineViewModel(
     val hasInternetConnection: Boolean
         get() = networkConnection.isOnline()
 
+    private val courseSubSections = mutableMapOf<String, MutableList<Block>>()
+    private val subSectionsDownloadsCount = mutableMapOf<String, Int>()
+    val courseSubSectionUnit = mutableMapOf<String, Block?>()
+
     override fun onCreate(owner: LifecycleOwner) {
         super.onCreate(owner)
         viewModelScope.launch {
@@ -77,7 +92,11 @@ class CourseOutlineViewModel(
                     _uiState.value = CourseOutlineUIState.CourseData(
                         courseStructure = state.courseStructure,
                         downloadedState = it.toMap(),
-                        resumeBlock = state.resumeBlock
+                        resumeComponent = state.resumeComponent,
+                        courseSubSections = courseSubSections,
+                        courseSectionsState = state.courseSectionsState,
+                        subSectionsDownloadsCount = subSectionsDownloadsCount,
+                        datesBannerInfo = state.datesBannerInfo,
                     )
                 }
             }
@@ -110,11 +129,34 @@ class CourseOutlineViewModel(
         getCourseDataInternal()
     }
 
-    fun getCourseData() {
+    private fun getCourseData() {
         _uiState.value = CourseOutlineUIState.Loading
         getCourseDataInternal()
     }
 
+    fun switchCourseSections(blockId: String): Boolean {
+        return if (_uiState.value is CourseOutlineUIState.CourseData) {
+            val state = _uiState.value as CourseOutlineUIState.CourseData
+            val courseSectionsState = state.courseSectionsState.toMutableMap()
+            courseSectionsState[blockId] = !(state.courseSectionsState[blockId] ?: false)
+
+            _uiState.value = CourseOutlineUIState.CourseData(
+                courseStructure = state.courseStructure,
+                downloadedState = state.downloadedState,
+                resumeComponent = state.resumeComponent,
+                courseSubSections = courseSubSections,
+                courseSectionsState = courseSectionsState,
+                subSectionsDownloadsCount = subSectionsDownloadsCount,
+                datesBannerInfo = state.datesBannerInfo,
+            )
+
+            courseSectionsState[blockId] ?: false
+
+        } else {
+            false
+        }
+    }
+
     private fun getCourseDataInternal() {
         viewModelScope.launch {
             try {
@@ -126,14 +168,35 @@ class CourseOutlineViewModel(
                 } else {
                     CourseComponentStatus("")
                 }
+
+                val datesBannerInfo = if (networkConnection.isOnline()) {
+                    interactor.getDatesBannerInfo(courseId)
+                } else {
+                    CourseDatesBannerInfo(
+                        missedDeadlines = false,
+                        missedGatedContent = false,
+                        verifiedUpgradeLink = "",
+                        contentTypeGatingEnabled = false,
+                        hasEnded = false
+                    )
+                }
                 setBlocks(blocks)
+                courseSubSections.clear()
+                courseSubSectionUnit.clear()
                 courseStructure = courseStructure.copy(blockData = sortBlocks(blocks))
                 initDownloadModelsStatus()
 
+                val courseSectionsState =
+                    (_uiState.value as? CourseOutlineUIState.CourseData)?.courseSectionsState.orEmpty()
+
                 _uiState.value = CourseOutlineUIState.CourseData(
                     courseStructure = courseStructure,
                     downloadedState = getDownloadModelsStatus(),
-                    resumeBlock = getResumeBlock(blocks, courseStatus.lastVisitedBlockId)
+                    resumeComponent = getResumeBlock(blocks, courseStatus.lastVisitedBlockId),
+                    courseSubSections = courseSubSections,
+                    courseSectionsState = courseSectionsState,
+                    subSectionsDownloadsCount = subSectionsDownloadsCount,
+                    datesBannerInfo = datesBannerInfo,
                 )
             } catch (e: Exception) {
                 if (e.isInternetError()) {
@@ -158,7 +221,17 @@ class CourseOutlineViewModel(
                 resultBlocks.add(block)
                 block.descendants.forEach { descendant ->
                     blocks.find { it.id == descendant }?.let { sequentialBlock ->
-                        resultBlocks.add(sequentialBlock)
+                        if (isCourseNestedListEnabled) {
+                            courseSubSections.getOrPut(block.id) { mutableListOf() }
+                                .add(sequentialBlock)
+                            courseSubSectionUnit[sequentialBlock.id] =
+                                sequentialBlock.getFirstDescendantBlock(blocks)
+                            subSectionsDownloadsCount[sequentialBlock.id] =
+                                sequentialBlock.getDownloadsCount(blocks)
+
+                        } else {
+                            resultBlocks.add(sequentialBlock)
+                        }
                         addDownloadableChildrenForSequentialBlock(sequentialBlock)
                     }
                 }
@@ -172,13 +245,30 @@ class CourseOutlineViewModel(
         continueBlockId: String
     ): Block? {
         val resumeBlock = blocks.firstOrNull { it.id == continueBlockId }
-        resumeVerticalBlock = blocks.find {
-            it.descendants.contains(resumeBlock?.id) && it.type == BlockType.VERTICAL
-        }
-        resumeSectionBlock = blocks.find {
-            it.descendants.contains(resumeVerticalBlock?.id) && it.type == BlockType.SEQUENTIAL
+        resumeVerticalBlock =
+            blocks.getVerticalBlocks().find { it.descendants.contains(resumeBlock?.id) }
+        resumeSectionBlock =
+            blocks.getSequentialBlocks().find { it.descendants.contains(resumeVerticalBlock?.id) }
+        return resumeBlock
+    }
+
+    fun resetCourseDatesBanner(onResetDates: (Boolean) -> Unit) {
+        viewModelScope.launch {
+            try {
+                interactor.resetCourseDates(courseId = courseId)
+                updateCourseData(false)
+                onResetDates(true)
+            } catch (e: Exception) {
+                if (e.isInternetError()) {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_no_connection))
+                } else {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
+                }
+                onResetDates(false)
+            }
         }
-        return resumeVerticalBlock
     }
 
     fun resumeCourseTappedEvent(blockId: String) {
@@ -200,4 +290,10 @@ class CourseOutlineViewModel(
         }
     }
 
+    fun verticalClickedEvent(blockId: String, blockName: String) {
+        val currentState = uiState.value
+        if (currentState is CourseOutlineUIState.CourseData) {
+            analytics.verticalClickedEvent(courseId, courseTitle, blockId, blockName)
+        }
+    }
 }
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/section/CourseSectionFragment.kt b/course/src/main/java/org/openedx/course/presentation/section/CourseSectionFragment.kt
index ed68c0d85..fe6205879 100644
--- a/course/src/main/java/org/openedx/course/presentation/section/CourseSectionFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/section/CourseSectionFragment.kt
@@ -5,45 +5,22 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material.CircularProgressIndicator
-import androidx.compose.material.Divider
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Scaffold
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
-import androidx.compose.material.rememberScaffoldState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Devices
@@ -53,6 +30,9 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.BlockType
 import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.Block
@@ -60,23 +40,14 @@ import org.openedx.core.domain.model.BlockCounts
 import org.openedx.core.extension.serializable
 import org.openedx.core.module.db.DownloadedState
 import org.openedx.core.presentation.course.CourseViewMode
-import org.openedx.core.ui.BackBtn
-import org.openedx.core.ui.HandleUIMessage
-import org.openedx.core.ui.WindowSize
-import org.openedx.core.ui.WindowType
-import org.openedx.core.ui.rememberWindowSize
-import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.*
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
-import org.openedx.core.ui.windowSizeValue
 import org.openedx.course.R
 import org.openedx.course.presentation.CourseRouter
 import org.openedx.course.presentation.ui.CardArrow
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
 import java.io.File
 
 class CourseSectionFragment : Fragment() {
@@ -86,15 +57,12 @@ class CourseSectionFragment : Fragment() {
     }
     private val router by inject<CourseRouter>()
 
-    private var title = ""
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         lifecycle.addObserver(viewModel)
-        val blockId = requireArguments().getString(ARG_BLOCK_ID, "")
-        viewModel.mode = requireArguments().serializable<CourseViewMode>(ARG_MODE)!!
-        title = requireArguments().getString(ARG_TITLE, "")
-        viewModel.getBlocks(blockId, viewModel.mode)
+        val subSectionId = requireArguments().getString(ARG_SUBSECTION_ID, "")
+        viewModel.mode = requireArguments().serializable(ARG_MODE)!!
+        viewModel.getBlocks(subSectionId, viewModel.mode)
     }
 
     override fun onCreateView(
@@ -112,7 +80,6 @@ class CourseSectionFragment : Fragment() {
                 CourseSectionScreen(
                     windowSize = windowSize,
                     uiState = uiState,
-                    title = title,
                     uiMessage = uiMessage,
                     onBackClick = {
                         requireActivity().supportFragmentManager.popBackStack()
@@ -121,10 +88,9 @@ class CourseSectionFragment : Fragment() {
                         if (block.descendants.isNotEmpty()) {
                             viewModel.verticalClickedEvent(block.blockId, block.displayName)
                             router.navigateToCourseContainer(
-                                requireActivity().supportFragmentManager,
-                                block.id,
+                                fm = requireActivity().supportFragmentManager,
                                 courseId = viewModel.courseId,
-                                courseName = block.displayName,
+                                unitId = block.id,
                                 mode = viewModel.mode
                             )
                         }
@@ -145,26 +111,43 @@ class CourseSectionFragment : Fragment() {
                         }
                     }
                 )
+
+                LaunchedEffect(rememberSaveable { true }) {
+                    val unitId = requireArguments().getString(ARG_UNIT_ID, "")
+                    if (unitId.isNotEmpty()) {
+                        router.navigateToCourseContainer(
+                            fm = requireActivity().supportFragmentManager,
+                            courseId = viewModel.courseId,
+                            unitId = unitId,
+                            componentId = requireArguments().getString(ARG_COMPONENT_ID, ""),
+                            mode = viewModel.mode
+                        )
+                        requireArguments().putString(ARG_UNIT_ID, "")
+                    }
+                }
             }
         }
     }
 
     companion object {
         private const val ARG_COURSE_ID = "courseId"
-        private const val ARG_BLOCK_ID = "blockId"
-        private const val ARG_TITLE = "title"
+        private const val ARG_SUBSECTION_ID = "subSectionId"
+        private const val ARG_UNIT_ID = "unitId"
+        private const val ARG_COMPONENT_ID = "componentId"
         private const val ARG_MODE = "mode"
         fun newInstance(
             courseId: String,
-            blockId: String,
-            title: String,
+            subSectionId: String,
+            unitId: String?,
+            componentId: String?,
             mode: CourseViewMode,
         ): CourseSectionFragment {
             val fragment = CourseSectionFragment()
             fragment.arguments = bundleOf(
                 ARG_COURSE_ID to courseId,
-                ARG_BLOCK_ID to blockId,
-                ARG_TITLE to title,
+                ARG_SUBSECTION_ID to subSectionId,
+                ARG_UNIT_ID to unitId,
+                ARG_COMPONENT_ID to componentId,
                 ARG_MODE to mode
             )
             return fragment
@@ -176,13 +159,17 @@ class CourseSectionFragment : Fragment() {
 private fun CourseSectionScreen(
     windowSize: WindowSize,
     uiState: CourseSectionUIState,
-    title: String,
     uiMessage: UIMessage?,
     onBackClick: () -> Unit,
     onItemClick: (Block) -> Unit,
     onDownloadClick: (Block) -> Unit
 ) {
     val scaffoldState = rememberScaffoldState()
+    val title = when (uiState) {
+        is CourseSectionUIState.Blocks -> uiState.sectionName
+        else -> ""
+    }
+
     Scaffold(
         modifier = Modifier
             .fillMaxSize()
@@ -222,6 +209,7 @@ private fun CourseSectionScreen(
                 Box(
                     Modifier
                         .fillMaxWidth()
+                        .displayCutoutForLandscape()
                         .zIndex(1f),
                     contentAlignment = Alignment.CenterStart
                 ) {
@@ -288,12 +276,17 @@ private fun CourseSubsectionItem(
     onClick: (Block) -> Unit,
     onDownloadClick: (Block) -> Unit
 ) {
-    val icon =
-        if (block.completion == 1.0) painterResource(R.drawable.course_ic_task_alt) else painterResource(
-            id = getUnitBlockIcon(block)
+    val completedIconPainter =
+        if (block.isCompleted()) painterResource(R.drawable.course_ic_task_alt) else painterResource(
+            R.drawable.ic_course_chapter_icon
         )
-    val iconColor =
-        if (block.completion == 1.0) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface
+    val completedIconColor =
+        if (block.isCompleted()) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface
+    val completedIconDescription = if (block.isCompleted()) {
+        stringResource(id = R.string.course_accessibility_section_completed)
+    } else {
+        stringResource(id = R.string.course_accessibility_section_uncompleted)
+    }
 
     val iconModifier = Modifier.size(24.dp)
 
@@ -310,9 +303,9 @@ private fun CourseSubsectionItem(
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             Icon(
-                painter = icon,
-                contentDescription = null,
-                tint = iconColor
+                painter = completedIconPainter,
+                contentDescription = completedIconDescription,
+                tint = completedIconColor
             )
             Spacer(modifier = Modifier.width(16.dp))
             Text(
@@ -330,16 +323,22 @@ private fun CourseSubsectionItem(
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 if (downloadedState == DownloadedState.DOWNLOADED || downloadedState == DownloadedState.NOT_DOWNLOADED) {
-                    val iconPainter = if (downloadedState == DownloadedState.DOWNLOADED) {
+                    val downloadIconPainter = if (downloadedState == DownloadedState.DOWNLOADED) {
                         painterResource(id = R.drawable.course_ic_remove_download)
                     } else {
                         painterResource(id = R.drawable.course_ic_start_download)
                     }
+                    val downloadIconDescription =
+                        if (downloadedState == DownloadedState.DOWNLOADED) {
+                            stringResource(id = R.string.course_accessibility_remove_course_section)
+                        } else {
+                            stringResource(id = R.string.course_accessibility_download_course_section)
+                        }
                     IconButton(modifier = iconModifier,
                         onClick = { onDownloadClick(block) }) {
                         Icon(
-                            painter = iconPainter,
-                            contentDescription = null,
+                            painter = downloadIconPainter,
+                            contentDescription = downloadIconDescription,
                             tint = MaterialTheme.appColors.textPrimary
                         )
                     }
@@ -358,7 +357,7 @@ private fun CourseSubsectionItem(
                             onClick = { onDownloadClick(block) }) {
                             Icon(
                                 imageVector = Icons.Filled.Close,
-                                contentDescription = null,
+                                contentDescription = stringResource(id = R.string.course_accessibility_stop_downloading_course_section),
                                 tint = MaterialTheme.appColors.error
                             )
                         }
@@ -373,7 +372,7 @@ private fun CourseSubsectionItem(
 }
 
 private fun getUnitBlockIcon(block: Block): Int {
-    return when (block.type) {
+    return when (block.descendantsType) {
         BlockType.VIDEO -> R.drawable.ic_course_video
         BlockType.PROBLEM -> R.drawable.ic_course_pen
         BlockType.DISCUSSION -> R.drawable.ic_course_discussion
@@ -397,9 +396,9 @@ private fun CourseSectionScreenPreview() {
                     mockBlock
                 ),
                 mapOf(),
-                ""
+                "",
+                "Course default"
             ),
-            "Course default",
             uiMessage = null,
             onBackClick = {},
             onItemClick = {},
@@ -423,9 +422,9 @@ private fun CourseSectionScreenTabletPreview() {
                     mockBlock
                 ),
                 mapOf(),
-                ""
+                "",
+                "Course default",
             ),
-            "Course default",
             uiMessage = null,
             onBackClick = {},
             onItemClick = {},
@@ -447,5 +446,7 @@ private val mockBlock = Block(
     studentViewMultiDevice = false,
     blockCounts = BlockCounts(0),
     descendants = emptyList(),
-    completion = 0.0
-)
\ No newline at end of file
+    descendantsType = BlockType.HTML,
+    completion = 0.0,
+    containsGatedContent = false
+)
diff --git a/course/src/main/java/org/openedx/course/presentation/section/CourseSectionUIState.kt b/course/src/main/java/org/openedx/course/presentation/section/CourseSectionUIState.kt
index 8cbc39050..a8a16681a 100644
--- a/course/src/main/java/org/openedx/course/presentation/section/CourseSectionUIState.kt
+++ b/course/src/main/java/org/openedx/course/presentation/section/CourseSectionUIState.kt
@@ -7,6 +7,7 @@ sealed class CourseSectionUIState {
     data class Blocks(
         val blocks: List<Block>,
         val downloadedState: Map<String, DownloadedState>,
+        val sectionName: String,
         val courseName: String
     ) : CourseSectionUIState()
     object Loading : CourseSectionUIState()
diff --git a/course/src/main/java/org/openedx/course/presentation/section/CourseSectionViewModel.kt b/course/src/main/java/org/openedx/course/presentation/section/CourseSectionViewModel.kt
index 9faa7a383..aaa6e99d0 100644
--- a/course/src/main/java/org/openedx/course/presentation/section/CourseSectionViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/section/CourseSectionViewModel.kt
@@ -49,15 +49,16 @@ class CourseSectionViewModel(
         super.onCreate(owner)
         viewModelScope.launch {
             downloadModelsStatusFlow.collect { downloadModels ->
-                if (uiState.value is CourseSectionUIState.Blocks) {
-                    val list = (uiState.value as CourseSectionUIState.Blocks).blocks
-                    val courseName = (uiState.value as CourseSectionUIState.Blocks).courseName
-                    _uiState.value =
-                        CourseSectionUIState.Blocks(
-                            ArrayList(list),
-                            downloadModels.toMap(),
-                            courseName
-                        )
+                when (val state = uiState.value) {
+                    is CourseSectionUIState.Blocks -> {
+                        val list = (uiState.value as CourseSectionUIState.Blocks).blocks
+                        _uiState.value = CourseSectionUIState.Blocks(
+                            sectionName = state.sectionName,
+                            courseName = state.courseName,
+                            blocks = ArrayList(list),
+                            downloadedState = downloadModels.toMap())
+                    }
+                    else -> {}
                 }
             }
         }
@@ -82,12 +83,14 @@ class CourseSectionViewModel(
                 val blocks = courseStructure.blockData
                 setBlocks(blocks)
                 val newList = getDescendantBlocks(blocks, blockId)
+                val sequentialBlock = getSequentialBlock(blocks, blockId)
                 initDownloadModelsStatus()
                 _uiState.value =
                     CourseSectionUIState.Blocks(
-                        ArrayList(newList),
-                        getDownloadModelsStatus(),
-                        courseStructure.name
+                        blocks = ArrayList(newList),
+                        downloadedState = getDownloadModelsStatus(),
+                        courseName = courseStructure.name,
+                        sectionName = sequentialBlock.displayName
                     )
             } catch (e: Exception) {
                 if (e.isInternetError()) {
@@ -117,9 +120,7 @@ class CourseSectionViewModel(
     private fun getDescendantBlocks(blocks: List<Block>, id: String): List<Block> {
         val resultList = mutableListOf<Block>()
         if (blocks.isEmpty()) return emptyList()
-        val selectedBlock = blocks.first {
-            it.id == id
-        }
+        val selectedBlock = getSequentialBlock(blocks, id)
         for (descendant in selectedBlock.descendants) {
             val blockDescendant = blocks.find {
                 it.id == descendant
@@ -134,6 +135,12 @@ class CourseSectionViewModel(
         return resultList
     }
 
+    private fun getSequentialBlock(blocks: List<Block>, id: String): Block {
+        return blocks.first {
+            it.id == id
+        }
+    }
+
     fun verticalClickedEvent(blockId: String, blockName: String) {
         val currentState = uiState.value
         if (currentState is CourseSectionUIState.Blocks) {
diff --git a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt
index ea5d4fdee..1e6f81361 100644
--- a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt
+++ b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt
@@ -5,7 +5,9 @@ import androidx.compose.animation.animateColorAsState
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -16,17 +18,21 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Button
 import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Card
 import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
@@ -39,50 +45,64 @@ import androidx.compose.material.icons.filled.ChevronRight
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.TaskAlt
-import androidx.compose.material.icons.filled.Wifi
 import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.zIndex
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
+import org.jsoup.Jsoup
 import org.openedx.core.BlockType
 import org.openedx.core.domain.model.Block
 import org.openedx.core.domain.model.BlockCounts
 import org.openedx.core.domain.model.Certificate
+import org.openedx.core.domain.model.CourseDatesBannerInfo
 import org.openedx.core.domain.model.CourseSharingUtmParameters
 import org.openedx.core.domain.model.CoursewareAccess
 import org.openedx.core.domain.model.EnrolledCourse
 import org.openedx.core.domain.model.EnrolledCourseData
 import org.openedx.core.extension.isLinkValid
+import org.openedx.core.extension.nonZero
 import org.openedx.core.module.db.DownloadedState
+import org.openedx.core.ui.BackBtn
 import org.openedx.core.ui.IconText
 import org.openedx.core.ui.OpenEdXButton
 import org.openedx.core.ui.OpenEdXOutlinedButton
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
 import org.openedx.core.ui.noRippleClickable
+import org.openedx.core.ui.rememberWindowSize
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
 import org.openedx.course.R
-import org.jsoup.Jsoup
+import org.openedx.course.presentation.dates.mockedCourseBannerInfo
+import org.openedx.course.presentation.outline.CourseOutlineFragment
+import subtitleFile.Caption
 import subtitleFile.TimedTextObject
 import java.util.Date
 import org.openedx.course.R as courseR
@@ -90,14 +110,24 @@ import org.openedx.course.R as courseR
 @Composable
 fun CourseImageHeader(
     modifier: Modifier,
+    apiHostUrl: String,
     courseImage: String?,
     courseCertificate: Certificate?,
+    courseName: String
 ) {
+    val configuration = LocalConfiguration.current
+    val windowSize = rememberWindowSize()
+    val contentScale =
+        if (!windowSize.isTablet && configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
+            ContentScale.Fit
+        } else {
+            ContentScale.Crop
+        }
     val uriHandler = LocalUriHandler.current
     val imageUrl = if (courseImage?.isLinkValid() == true) {
         courseImage
     } else {
-        org.openedx.core.BuildConfig.BASE_URL.dropLast(1) + courseImage
+        apiHostUrl.dropLast(1) + courseImage
     }
     Box(modifier = modifier, contentAlignment = Alignment.Center) {
         AsyncImage(
@@ -106,8 +136,11 @@ fun CourseImageHeader(
                 .error(org.openedx.core.R.drawable.core_no_image_course)
                 .placeholder(org.openedx.core.R.drawable.core_no_image_course)
                 .build(),
-            contentDescription = null,
-            contentScale = ContentScale.Crop,
+            contentDescription = stringResource(
+                id = R.string.course_accessibility_header_image_for,
+                courseName
+            ),
+            contentScale = contentScale,
             modifier = Modifier
                 .fillMaxSize()
                 .clip(MaterialTheme.appShapes.cardShape)
@@ -123,7 +156,7 @@ fun CourseImageHeader(
             ) {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_course_completed_mark),
-                    contentDescription = null,
+                    contentDescription = stringResource(id = R.string.course_congratulations),
                     tint = Color.White
                 )
                 Spacer(Modifier.height(6.dp))
@@ -175,15 +208,21 @@ fun CourseSectionCard(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
-            val icon =
-                if (block.completion == 1.0) painterResource(R.drawable.course_ic_task_alt) else painterResource(R.drawable.ic_course_chapter_icon)
-            val iconColor =
-                if (block.completion == 1.0) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface
-
+            val completedIconPainter =
+                if (block.isCompleted()) painterResource(R.drawable.course_ic_task_alt) else painterResource(
+                    R.drawable.ic_course_chapter_icon
+                )
+            val completedIconColor =
+                if (block.isCompleted()) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface
+            val completedIconDescription = if (block.isCompleted()) {
+                stringResource(id = R.string.course_accessibility_section_completed)
+            } else {
+                stringResource(id = R.string.course_accessibility_section_uncompleted)
+            }
             Icon(
-                painter = icon,
-                contentDescription = null,
-                tint = iconColor
+                painter = completedIconPainter,
+                contentDescription = completedIconDescription,
+                tint = completedIconColor
             )
             Spacer(modifier = Modifier.width(16.dp))
             Text(
@@ -201,16 +240,22 @@ fun CourseSectionCard(
                 verticalAlignment = Alignment.CenterVertically
             ) {
                 if (downloadedState == DownloadedState.DOWNLOADED || downloadedState == DownloadedState.NOT_DOWNLOADED) {
-                    val iconPainter = if (downloadedState == DownloadedState.DOWNLOADED) {
+                    val downloadIconPainter = if (downloadedState == DownloadedState.DOWNLOADED) {
                         painterResource(id = R.drawable.course_ic_remove_download)
                     } else {
                         painterResource(id = R.drawable.course_ic_start_download)
                     }
+                    val downloadIconDescription =
+                        if (downloadedState == DownloadedState.DOWNLOADED) {
+                            stringResource(id = R.string.course_accessibility_remove_course_section)
+                        } else {
+                            stringResource(id = R.string.course_accessibility_download_course_section)
+                        }
                     IconButton(modifier = iconModifier,
                         onClick = { onDownloadClick(block) }) {
                         Icon(
-                            painter = iconPainter,
-                            contentDescription = null,
+                            painter = downloadIconPainter,
+                            contentDescription = downloadIconDescription,
                             tint = MaterialTheme.appColors.textPrimary
                         )
                     }
@@ -229,7 +274,7 @@ fun CourseSectionCard(
                             onClick = { onDownloadClick(block) }) {
                             Icon(
                                 imageVector = Icons.Filled.Close,
-                                contentDescription = null,
+                                contentDescription = stringResource(id = R.string.course_accessibility_stop_downloading_course_section),
                                 tint = MaterialTheme.appColors.error
                             )
                         }
@@ -260,9 +305,9 @@ fun SequentialItem(
     block: Block,
     onClick: (Block) -> Unit
 ) {
-    val icon = if (block.completion == 1.0) Icons.Filled.TaskAlt else Icons.Filled.Home
+    val icon = if (block.isCompleted()) Icons.Filled.TaskAlt else Icons.Filled.Home
     val iconColor =
-        if (block.completion == 1.0) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface
+        if (block.isCompleted()) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface
     Row(
         Modifier
             .fillMaxWidth()
@@ -298,36 +343,16 @@ fun SequentialItem(
 }
 
 @Composable
-fun VideoRotateView() {
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .clip(MaterialTheme.appShapes.buttonShape)
-            .background(MaterialTheme.appColors.info)
-            .padding(horizontal = 16.dp, vertical = 12.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Icon(
-            painter = painterResource(id = R.drawable.course_ic_screen_rotation),
-            contentDescription = null,
-            tint = Color.White
-        )
-        Spacer(Modifier.width(8.dp))
-        Text(
-            text = stringResource(id = R.string.course_video_rotate_for_fullscreen),
-            style = MaterialTheme.appTypography.titleMedium,
-            color = Color.White
-        )
-    }
-}
-
-@Composable
-fun VideoTitle(text: String) {
+fun VideoTitle(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
     Text(
         text = text,
+        modifier = modifier,
         color = MaterialTheme.appColors.textPrimary,
         style = MaterialTheme.appTypography.titleLarge,
-        maxLines = 3,
+        maxLines = 1,
         overflow = TextOverflow.Ellipsis
     )
 }
@@ -338,22 +363,32 @@ fun NavigationUnitsButtons(
     nextButtonText: String,
     hasPrevBlock: Boolean,
     hasNextBlock: Boolean,
+    isVerticalNavigation: Boolean,
     onPrevClick: () -> Unit,
     onNextClick: () -> Unit
 ) {
     val nextButtonIcon = if (hasNextBlock) {
         painterResource(id = org.openedx.core.R.drawable.core_ic_down)
     } else {
-        painterResource(id = org.openedx.core.R.drawable.core_ic_check)
+        painterResource(id = org.openedx.core.R.drawable.core_ic_check_in_box)
     }
 
-    val nextButtonModifier = if (hasPrevBlock) {
-        Modifier
-    } else Modifier.fillMaxWidth(0.6f)
+    val subModifier =
+        if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT) {
+            Modifier
+                .height(72.dp)
+                .fillMaxWidth()
+        } else {
+            Modifier
+                .statusBarsPadding()
+                .padding(end = 32.dp)
+                .padding(top = 2.dp)
+        }
 
     Row(
         modifier = Modifier
-            .fillMaxWidth()
+            .navigationBarsPadding()
+            .then(subModifier)
             .padding(horizontal = 12.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.Center
@@ -381,6 +416,7 @@ fun NavigationUnitsButtons(
                     )
                     Spacer(Modifier.width(8.dp))
                     Icon(
+                        modifier = Modifier.rotate(if (isVerticalNavigation) 0f else -90f),
                         painter = painterResource(id = org.openedx.core.R.drawable.core_ic_up),
                         contentDescription = null,
                         tint = MaterialTheme.appColors.primary
@@ -391,7 +427,7 @@ fun NavigationUnitsButtons(
         }
         Button(
             modifier = Modifier
-                .height(42.dp).then(nextButtonModifier),
+                .height(42.dp),
             colors = ButtonDefaults.buttonColors(
                 backgroundColor = MaterialTheme.appColors.buttonBackground
             ),
@@ -410,6 +446,7 @@ fun NavigationUnitsButtons(
                 )
                 Spacer(Modifier.width(8.dp))
                 Icon(
+                    modifier = Modifier.rotate(if (isVerticalNavigation || !hasNextBlock) 0f else -90f),
                     painter = nextButtonIcon,
                     contentDescription = null,
                     tint = MaterialTheme.appColors.buttonText
@@ -419,6 +456,36 @@ fun NavigationUnitsButtons(
     }
 }
 
+@Composable
+fun HorizontalPageIndicator(
+    modifier: Modifier = Modifier,
+    blocks: List<Block>,
+    selectedPage: Int = 0,
+    completedColor: Color = Color.Green,
+    selectedColor: Color = Color.White,
+    defaultColor: Color = Color.Gray
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(1.dp),
+        modifier = modifier
+    ) {
+        blocks.forEachIndexed { index, block ->
+            val backgroundColor = when {
+                index == selectedPage -> selectedColor
+                block.isCompleted() -> completedColor
+                else -> defaultColor
+            }
+
+            Box(
+                modifier = Modifier
+                    .background(backgroundColor)
+                    .fillMaxHeight()
+                    .weight(1f)
+            )
+        }
+    }
+}
+
 @Composable
 fun VerticalPageIndicator(
     numberOfPages: Int,
@@ -459,11 +526,13 @@ fun Indicator(
 ) {
     val size by animateDpAsState(
         targetValue = if (isSelected) selectedSize else defaultRadius,
-        animationSpec = tween(300)
+        animationSpec = tween(300),
+        label = ""
     )
     val color by animateColorAsState(
         targetValue = if (isSelected) selectedColor else defaultColor,
-        animationSpec = tween(300)
+        animationSpec = tween(300),
+        label = ""
     )
 
     Box(
@@ -474,40 +543,6 @@ fun Indicator(
     )
 }
 
-@Composable
-fun ConnectionErrorView(
-    modifier: Modifier,
-    onReloadClick: () -> Unit
-) {
-    Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
-    ) {
-        Icon(
-            modifier = Modifier.size(100.dp),
-            imageVector = Icons.Filled.Wifi,
-            contentDescription = null,
-            tint = MaterialTheme.appColors.onSurface
-        )
-        Spacer(Modifier.height(16.dp))
-        Text(
-            modifier = Modifier.fillMaxWidth(0.6f),
-            text = stringResource(id = R.string.course_not_connected_to_internet),
-            color = MaterialTheme.appColors.textPrimary,
-            style = MaterialTheme.appTypography.titleMedium,
-            textAlign = TextAlign.Center
-        )
-        Spacer(Modifier.height(16.dp))
-        OpenEdXButton(
-            width = Modifier
-                .widthIn(Dp.Unspecified, 162.dp),
-            text = stringResource(id = org.openedx.core.R.string.core_reload),
-            onClick = onReloadClick
-        )
-    }
-}
-
 @Composable
 fun VideoSubtitles(
     listState: LazyListState,
@@ -515,11 +550,20 @@ fun VideoSubtitles(
     subtitleLanguage: String,
     showSubtitleLanguage: Boolean,
     currentIndex: Int,
+    onTranscriptClick: (Caption) -> Unit,
     onSettingsClick: () -> Unit
 ) {
     timedTextObject?.let {
+        val autoScrollDelay = 3000L
+        var lastScrollTime by remember {
+            mutableLongStateOf(0L)
+        }
+        if (listState.isScrollInProgress) {
+            lastScrollTime = Date().time
+        }
+
         LaunchedEffect(key1 = currentIndex) {
-            if (currentIndex > 1) {
+            if (currentIndex > 1 && lastScrollTime + autoScrollDelay < Date().time) {
                 listState.animateScrollToItem(currentIndex - 1)
             }
         }
@@ -551,8 +595,7 @@ fun VideoSubtitles(
                 }
                 Spacer(Modifier.height(24.dp))
                 LazyColumn(
-                    state = listState,
-                    userScrollEnabled = false
+                    state = listState
                 ) {
                     itemsIndexed(subtitles) { index, item ->
                         val textColor =
@@ -562,7 +605,11 @@ fun VideoSubtitles(
                                 MaterialTheme.appColors.textFieldBorder
                             }
                         Text(
-                            modifier = Modifier.fillMaxWidth(),
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .noRippleClickable {
+                                    onTranscriptClick(item)
+                                },
                             text = Jsoup.parse(item.content).text(),
                             color = textColor,
                             style = MaterialTheme.appTypography.bodyMedium
@@ -575,6 +622,453 @@ fun VideoSubtitles(
     }
 }
 
+@Composable
+fun CourseExpandableChapterCard(
+    modifier: Modifier,
+    block: Block,
+    onItemClick: (Block) -> Unit,
+    arrowDegrees: Float = 0f
+) {
+    Column(modifier = Modifier
+        .clickable { onItemClick(block) }
+        .background(if (block.isCompleted()) MaterialTheme.appColors.surface else Color.Transparent)
+    ) {
+        Row(
+            modifier
+                .fillMaxWidth()
+                .height(60.dp)
+                .padding(
+                    vertical = 8.dp
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            if (block.isCompleted()) {
+                val completedIconPainter = painterResource(R.drawable.course_ic_task_alt)
+                val completedIconColor = MaterialTheme.appColors.primary
+                val completedIconDescription =
+                    stringResource(id = R.string.course_accessibility_section_completed)
+
+                Icon(
+                    painter = completedIconPainter,
+                    contentDescription = completedIconDescription,
+                    tint = completedIconColor
+                )
+                Spacer(modifier = Modifier.width(16.dp))
+            }
+            Text(
+                modifier = Modifier.weight(1f),
+                text = block.displayName,
+                style = MaterialTheme.appTypography.titleSmall,
+                color = MaterialTheme.appColors.textPrimary,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+            CardArrow(degrees = arrowDegrees)
+        }
+    }
+}
+
+@Composable
+fun CourseSubSectionItem(
+    modifier: Modifier,
+    block: Block,
+    downloadedState: DownloadedState?,
+    downloadsCount: Int,
+    onClick: (Block) -> Unit,
+    onDownloadClick: (Block) -> Unit
+) {
+    val icon =
+        if (block.isCompleted()) painterResource(R.drawable.course_ic_task_alt) else painterResource(
+            R.drawable.ic_course_chapter_icon
+        )
+    val iconColor =
+        if (block.isCompleted()) MaterialTheme.appColors.primary else MaterialTheme.appColors.onSurface
+
+    val iconModifier = Modifier.size(24.dp)
+
+    Column(Modifier
+        .clickable { onClick(block) }
+        .background(if (block.isCompleted()) MaterialTheme.appColors.surface else Color.Transparent)
+    ) {
+        Row(
+            modifier
+                .fillMaxWidth()
+                .height(60.dp)
+                .padding(vertical = 16.dp)
+                .padding(start = 20.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Icon(
+                painter = icon,
+                contentDescription = null,
+                tint = iconColor
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+            Text(
+                modifier = Modifier.weight(1f),
+                text = block.displayName,
+                style = MaterialTheme.appTypography.titleSmall,
+                color = MaterialTheme.appColors.textPrimary,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+            Row(
+                modifier = Modifier.fillMaxHeight(),
+                horizontalArrangement = Arrangement.spacedBy(if (downloadsCount > 0) 8.dp else 24.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                if (downloadedState == DownloadedState.DOWNLOADED || downloadedState == DownloadedState.NOT_DOWNLOADED) {
+                    val downloadIconPainter = if (downloadedState == DownloadedState.DOWNLOADED) {
+                        painterResource(id = R.drawable.course_ic_remove_download)
+                    } else {
+                        painterResource(id = R.drawable.course_ic_start_download)
+                    }
+                    val downloadIconDescription =
+                        if (downloadedState == DownloadedState.DOWNLOADED) {
+                            stringResource(id = R.string.course_accessibility_remove_course_section)
+                        } else {
+                            stringResource(id = R.string.course_accessibility_download_course_section)
+                        }
+                    IconButton(modifier = iconModifier,
+                        onClick = { onDownloadClick(block) }) {
+                        Icon(
+                            painter = downloadIconPainter,
+                            contentDescription = downloadIconDescription,
+                            tint = MaterialTheme.appColors.textPrimary
+                        )
+                    }
+                } else if (downloadedState != null) {
+                    Box(contentAlignment = Alignment.Center) {
+                        if (downloadedState == DownloadedState.DOWNLOADING || downloadedState == DownloadedState.WAITING) {
+                            CircularProgressIndicator(
+                                modifier = Modifier.size(28.dp),
+                                backgroundColor = Color.LightGray,
+                                strokeWidth = 2.dp,
+                                color = MaterialTheme.appColors.primary
+                            )
+                        }
+                        IconButton(
+                            modifier = iconModifier.padding(2.dp),
+                            onClick = { onDownloadClick(block) }) {
+                            Icon(
+                                imageVector = Icons.Filled.Close,
+                                contentDescription = stringResource(id = R.string.course_accessibility_stop_downloading_course_section),
+                                tint = MaterialTheme.appColors.error
+                            )
+                        }
+                    }
+                }
+                if (downloadsCount > 0) {
+                    Text(
+                        text = downloadsCount.toString(),
+                        style = MaterialTheme.appTypography.titleSmall,
+                        color = MaterialTheme.appColors.textPrimary
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun CourseToolbar(
+    title: String,
+    onBackClick: () -> Unit
+) {
+    OpenEdXTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .displayCutoutForLandscape()
+                .zIndex(1f)
+                .statusBarsPadding(),
+            contentAlignment = Alignment.CenterStart
+        ) {
+            BackBtn { onBackClick() }
+            Text(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 56.dp),
+                text = title,
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleMedium,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                textAlign = TextAlign.Center
+            )
+        }
+    }
+}
+
+@Composable
+fun CourseUnitToolbar(
+    title: String,
+    onBackClick: () -> Unit
+) {
+    OpenEdXTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .displayCutoutForLandscape()
+                .zIndex(1f)
+                .statusBarsPadding()
+        ) {
+            BackBtn { onBackClick() }
+            Text(
+                modifier = Modifier
+                    .padding(horizontal = 56.dp)
+                    .align(Alignment.Center),
+                text = title,
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.titleSmall,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
+            )
+        }
+    }
+}
+
+@Composable
+fun SubSectionUnitsTitle(
+    unitName: String,
+    unitsCount: Int,
+    unitsListShowed: Boolean,
+    onUnitsClick: () -> Unit
+) {
+    val textStyle = MaterialTheme.appTypography.titleMedium
+    val hasUnits = unitsCount > 0
+    var rowModifier = Modifier
+        .fillMaxWidth()
+        .padding(
+            horizontal = 16.dp,
+            vertical = 8.dp
+        )
+        .displayCutoutForLandscape()
+    if (hasUnits) {
+        rowModifier = rowModifier.noRippleClickable { onUnitsClick() }
+    }
+
+    Row(
+        modifier = rowModifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        Text(
+            modifier = Modifier
+                .weight(1f),
+            text = unitName,
+            color = MaterialTheme.appColors.textPrimary,
+            style = textStyle,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            textAlign = TextAlign.Start
+        )
+
+        if (hasUnits) {
+            Icon(
+                modifier = Modifier.rotate(if (unitsListShowed) 180f else 0f),
+                painter = painterResource(id = R.drawable.ic_course_arrow_down),
+                contentDescription = null,
+                tint = MaterialTheme.appColors.textPrimary
+            )
+        }
+    }
+}
+
+@Composable
+fun SubSectionUnitsList(
+    unitBlocks: List<Block>,
+    selectedUnitIndex: Int = 0,
+    onUnitClick: (index: Int, unit: Block) -> Unit
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight(align = Alignment.Top)
+            .displayCutoutForLandscape(),
+        border = BorderStroke(1.dp, MaterialTheme.colors.onSurface.copy(alpha = 0.12f))
+    ) {
+        LazyColumn(Modifier.fillMaxWidth()) {
+            itemsIndexed(unitBlocks) { index, unit ->
+                Column(
+                    modifier = Modifier
+                        .background(
+                            if (index == selectedUnitIndex) MaterialTheme.appColors.surface else
+                                MaterialTheme.appColors.background
+                        )
+                        .clickable { onUnitClick(index, unit) }
+                ) {
+                    Row(
+                        modifier = Modifier
+                            .padding(8.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Image(
+                            modifier = Modifier
+                                .size(16.dp)
+                                .alpha(if (unit.isCompleted()) 1f else 0f),
+                            painter = painterResource(id = R.drawable.ic_course_check),
+                            contentDescription = "done"
+                        )
+                        Text(
+                            modifier = Modifier
+                                .padding(start = 8.dp, end = 8.dp)
+                                .weight(1f),
+                            text = unit.displayName,
+                            color = MaterialTheme.appColors.textPrimary,
+                            style = MaterialTheme.appTypography.labelMedium,
+                            maxLines = 2,
+                            overflow = TextOverflow.Ellipsis,
+                            textAlign = TextAlign.Start,
+                        )
+                        Icon(
+                            modifier = Modifier
+                                .size(18.dp),
+                            painter = painterResource(
+                                id = CourseOutlineFragment.getUnitBlockIcon(unit)
+                            ),
+                            contentDescription = null,
+                            tint = MaterialTheme.appColors.textPrimary
+                        )
+                    }
+                    if (unit.isGated()) {
+                        Row(
+                            modifier = Modifier
+                                .padding(horizontal = 8.dp)
+                                .padding(bottom = 8.dp),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Image(
+                                modifier = Modifier
+                                    .size(16.dp),
+                                painter = painterResource(id = R.drawable.ic_course_gated),
+                                contentDescription = "gated"
+                            )
+                            Text(
+                                modifier = Modifier
+                                    .padding(start = 8.dp, end = 8.dp)
+                                    .weight(1f),
+                                text = stringResource(id = R.string.course_gated_content_label),
+                                color = MaterialTheme.appColors.textPrimaryVariant,
+                                style = MaterialTheme.appTypography.labelSmall,
+                                maxLines = 2,
+                                overflow = TextOverflow.Ellipsis,
+                                textAlign = TextAlign.Start,
+                            )
+                        }
+                    }
+                    Divider()
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun CourseDatesBanner(
+    modifier: Modifier,
+    banner: CourseDatesBannerInfo,
+    resetDates: () -> Unit,
+) {
+    val cardModifier = modifier
+        .background(
+            MaterialTheme.appColors.cardViewBackground,
+            MaterialTheme.appShapes.material.medium
+        )
+        .border(
+            1.dp,
+            MaterialTheme.appColors.cardViewBorder,
+            MaterialTheme.appShapes.material.medium
+        )
+        .padding(16.dp)
+
+    Column(modifier = cardModifier) {
+        banner.bannerType.headerResId.nonZero()?.let {
+            Text(
+                modifier = Modifier.padding(bottom = 8.dp),
+                text = stringResource(id = it),
+                style = MaterialTheme.appTypography.titleMedium,
+                color = MaterialTheme.appColors.textDark
+            )
+        }
+
+        banner.bannerType.bodyResId.nonZero()?.let {
+            Text(
+                modifier = Modifier.padding(bottom = 8.dp),
+                text = stringResource(id = it),
+                style = MaterialTheme.appTypography.bodyMedium,
+                color = MaterialTheme.appColors.textDark
+            )
+        }
+
+        banner.bannerType.buttonResId.nonZero()?.let {
+            OpenEdXButton(
+                text = stringResource(id = it),
+                onClick = resetDates,
+            )
+        }
+    }
+}
+
+@Composable
+fun CourseDatesBannerTablet(
+    modifier: Modifier,
+    banner: CourseDatesBannerInfo,
+    resetDates: () -> Unit,
+) {
+    val cardModifier = modifier
+        .background(
+            MaterialTheme.appColors.cardViewBackground,
+            MaterialTheme.appShapes.material.medium
+        )
+        .border(
+            1.dp,
+            MaterialTheme.appColors.cardViewBorder,
+            MaterialTheme.appShapes.material.medium
+        )
+        .padding(16.dp)
+
+    Row(
+        modifier = cardModifier.fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(end = 16.dp)
+        ) {
+            banner.bannerType.headerResId.nonZero()?.let {
+                Text(
+                    modifier = Modifier.padding(bottom = 8.dp),
+                    text = stringResource(id = it),
+                    style = MaterialTheme.appTypography.titleMedium,
+                    color = MaterialTheme.appColors.textDark
+                )
+            }
+
+            banner.bannerType.bodyResId.nonZero()?.let {
+                Text(
+                    text = stringResource(id = it),
+                    style = MaterialTheme.appTypography.bodyMedium,
+                    color = MaterialTheme.appColors.textDark
+                )
+            }
+        }
+        banner.bannerType.buttonResId.nonZero()?.let {
+            OpenEdXButton(
+                width = Modifier.width(210.dp),
+                text = stringResource(id = it),
+                onClick = resetDates,
+            )
+        }
+    }
+}
+
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
@@ -584,6 +1078,7 @@ private fun NavigationUnitsButtonsOnlyNextButtonPreview() {
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
             hasPrevBlock = true,
             hasNextBlock = true,
+            isVerticalNavigation = true,
             nextButtonText = "Next",
             onPrevClick = {}) {}
     }
@@ -598,6 +1093,7 @@ private fun NavigationUnitsButtonsOnlyFinishButtonPreview() {
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
             hasPrevBlock = true,
             hasNextBlock = false,
+            isVerticalNavigation = true,
             nextButtonText = "Finish",
             onPrevClick = {}) {}
     }
@@ -612,6 +1108,7 @@ private fun NavigationUnitsButtonsWithFinishPreview() {
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
             hasPrevBlock = true,
             hasNextBlock = false,
+            isVerticalNavigation = true,
             nextButtonText = "Finish",
             onPrevClick = {}) {}
     }
@@ -626,20 +1123,12 @@ private fun NavigationUnitsButtonsWithNextPreview() {
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
             hasPrevBlock = true,
             hasNextBlock = true,
+            isVerticalNavigation = true,
             nextButtonText = "Next",
             onPrevClick = {}) {}
     }
 }
 
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
-@Composable
-private fun VideoRotateViewPreview() {
-    OpenEdXTheme {
-        VideoRotateView()
-    }
-}
-
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
@@ -678,13 +1167,41 @@ private fun CourseHeaderPreview() {
                     .fillMaxWidth()
                     .height(200.dp)
                     .padding(6.dp),
+                apiHostUrl = "",
                 courseCertificate = Certificate(""),
-                courseImage = ""
+                courseImage = "",
+                courseName = ""
             )
         }
     }
 }
 
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun CourseDatesBannerPreview() {
+    OpenEdXTheme {
+        CourseDatesBanner(
+            modifier = Modifier,
+            banner = mockedCourseBannerInfo,
+            resetDates = {}
+        )
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, device = Devices.NEXUS_9)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, device = Devices.NEXUS_9)
+@Composable
+private fun CourseDatesBannerTabletPreview() {
+    OpenEdXTheme {
+        CourseDatesBannerTablet(
+            modifier = Modifier,
+            banner = mockedCourseBannerInfo,
+            resetDates = {}
+        )
+    }
+}
+
 private val mockCourse = EnrolledCourse(
     auditAccessExpires = Date(),
     created = "created",
@@ -734,5 +1251,7 @@ private val mockChapterBlock = Block(
     studentViewMultiDevice = false,
     blockCounts = BlockCounts(1),
     descendants = emptyList(),
-    completion = 0.0
-)
\ No newline at end of file
+    descendantsType = BlockType.CHAPTER,
+    completion = 0.0,
+    containsGatedContent = false
+)
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt
index b89e4ae66..bdf5dcd8b 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/NotSupportedUnitFragment.kt
@@ -4,6 +4,8 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -80,6 +82,7 @@ private fun NotSupportedUnitScreen(
 ) {
     val scaffoldState = rememberScaffoldState()
     val uriHandler = LocalUriHandler.current
+    val scrollState = rememberScrollState()
     Scaffold(
         modifier = Modifier.fillMaxSize(),
         scaffoldState = scaffoldState
@@ -102,6 +105,7 @@ private fun NotSupportedUnitScreen(
         ) {
             Column(
                 modifier = Modifier
+                    .verticalScroll(scrollState)
                     .padding(it)
                     .then(contentWidth),
                 verticalArrangement = Arrangement.Center,
@@ -146,6 +150,7 @@ private fun NotSupportedUnitScreen(
                         style = MaterialTheme.appTypography.labelLarge
                     )
                 }
+                Spacer(Modifier.height(20.dp))
             }
         }
     }
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerAdapter.kt b/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerAdapter.kt
index b0ac5a952..5dc12b617 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerAdapter.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerAdapter.kt
@@ -2,7 +2,6 @@ package org.openedx.course.presentation.unit.container
 
 import androidx.fragment.app.Fragment
 import androidx.viewpager2.adapter.FragmentStateAdapter
-import org.openedx.core.BlockType
 import org.openedx.core.FragmentViewType
 import org.openedx.core.domain.model.Block
 import org.openedx.course.presentation.unit.NotSupportedUnitFragment
@@ -14,8 +13,8 @@ import org.openedx.discussion.presentation.topics.DiscussionTopicsFragment
 
 class CourseUnitContainerAdapter(
     fragment: Fragment,
+    val blocks: List<Block>,
     private val viewModel: CourseUnitContainerViewModel,
-    private var blocks: List<Block>
 ) : FragmentStateAdapter(fragment) {
 
     override fun getItemCount(): Int = blocks.size
@@ -23,19 +22,9 @@ class CourseUnitContainerAdapter(
     override fun createFragment(position: Int): Fragment = unitBlockFragment(blocks[position])
 
     private fun unitBlockFragment(block: Block): Fragment {
-        return when (block.type) {
-            BlockType.HTML,
-            BlockType.PROBLEM,
-            BlockType.OPENASSESSMENT,
-            BlockType.DRAG_AND_DROP_V2,
-            BlockType.WORD_CLOUD,
-            BlockType.LTI_CONSUMER,
-            -> {
-                HtmlUnitFragment.newInstance(block.id, block.studentViewUrl)
-            }
-
-            BlockType.VIDEO -> {
-                val encodedVideos = block.studentViewData!!.encodedVideos!!
+        return when {
+            (block.isVideoBlock && block.studentViewData?.encodedVideos != null) -> {
+                val encodedVideos = block.studentViewData?.encodedVideos!!
                 val transcripts = block.studentViewData!!.transcripts
                 with(encodedVideos) {
                     var isDownloaded = false
@@ -76,7 +65,7 @@ class CourseUnitContainerAdapter(
                 }
             }
 
-            BlockType.DISCUSSION -> {
+            (block.isDiscussionBlock && block.studentViewData?.topicId.isNullOrEmpty().not()) -> {
                 DiscussionThreadsFragment.newInstance(
                     DiscussionTopicsFragment.TOPIC,
                     viewModel.courseId,
@@ -87,6 +76,23 @@ class CourseUnitContainerAdapter(
                 )
             }
 
+            block.studentViewMultiDevice.not() -> {
+                NotSupportedUnitFragment.newInstance(
+                    block.id,
+                    block.lmsWebUrl
+                )
+            }
+
+            block.isHTMLBlock ||
+                    block.isProblemBlock ||
+                    block.isOpenAssessmentBlock ||
+                    block.isDragAndDropBlock ||
+                    block.isWordCloudBlock ||
+                    block.isLTIConsumerBlock ||
+                    block.isSurveyBlock -> {
+                HtmlUnitFragment.newInstance(block.id, block.studentViewUrl)
+            }
+
             else -> {
                 NotSupportedUnitFragment.newInstance(
                     block.id,
@@ -95,4 +101,4 @@ class CourseUnitContainerAdapter(
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerFragment.kt
index 8c7544e80..9bee43fe6 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerFragment.kt
@@ -2,27 +2,33 @@ package org.openedx.course.presentation.unit.container
 
 import android.os.Bundle
 import android.os.SystemClock
+import android.view.LayoutInflater
 import android.view.View
-import android.widget.FrameLayout
-import androidx.compose.foundation.layout.padding
+import android.view.ViewGroup
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.MaterialTheme
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.core.os.bundleOf
+import androidx.core.view.isGone
+import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
+import androidx.lifecycle.lifecycleScope
 import androidx.viewpager2.widget.ViewPager2
+import com.google.android.gms.cast.framework.CastButtonFactory
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.openedx.core.BlockType
 import org.openedx.core.extension.serializable
 import org.openedx.core.presentation.course.CourseViewMode
 import org.openedx.core.presentation.global.InsetHolder
-import org.openedx.core.presentation.global.viewBinding
-import org.openedx.core.ui.BackBtn
 import org.openedx.core.ui.rememberWindowSize
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
@@ -31,15 +37,14 @@ import org.openedx.course.databinding.FragmentCourseUnitContainerBinding
 import org.openedx.course.presentation.ChapterEndFragmentDialog
 import org.openedx.course.presentation.CourseRouter
 import org.openedx.course.presentation.DialogListener
-import org.openedx.course.presentation.ui.NavigationUnitsButtons
-import org.openedx.course.presentation.ui.VerticalPageIndicator
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
+import org.openedx.course.presentation.ui.*
+
 
 class CourseUnitContainerFragment : Fragment(R.layout.fragment_course_unit_container) {
 
-    private val binding by viewBinding(FragmentCourseUnitContainerBinding::bind)
+    private val binding: FragmentCourseUnitContainerBinding
+        get() = _binding!!
+    private var _binding: FragmentCourseUnitContainerBinding? = null
 
     private val viewModel by viewModel<CourseUnitContainerViewModel> {
         parametersOf(requireArguments().getString(ARG_COURSE_ID, ""))
@@ -47,38 +52,57 @@ class CourseUnitContainerFragment : Fragment(R.layout.fragment_course_unit_conta
 
     private val router by inject<CourseRouter>()
 
-    private var blockId: String = ""
+    private var unitId: String = ""
+    private var componentId: String = ""
 
     private lateinit var adapter: CourseUnitContainerAdapter
 
     private var lastClickTime = 0L
 
+    private val onPageChangeCallback = object : ViewPager2.OnPageChangeCallback() {
+        override fun onPageSelected(position: Int) {
+            super.onPageSelected(position)
+            val blocks = viewModel.getUnitBlocks()
+            blocks.getOrNull(position)?.let { currentBlock ->
+                val encodedVideo = currentBlock.studentViewData?.encodedVideos
+                binding.mediaRouteButton.isVisible = currentBlock.type == BlockType.VIDEO
+                        && encodedVideo?.hasNonYoutubeVideo == true
+                        && !encodedVideo.videoUrl.endsWith(".m3u8")
+            }
+        }
+    }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         lifecycle.addObserver(viewModel)
-        blockId = requireArguments().getString(ARG_BLOCK_ID, "")
+        unitId = requireArguments().getString(UNIT_ID, "")
+        componentId = requireArguments().getString(ARG_COMPONENT_ID, "")
         viewModel.loadBlocks(requireArguments().serializable(ARG_MODE)!!)
-        viewModel.setupCurrentIndex(blockId)
+        viewModel.setupCurrentIndex(unitId, componentId)
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ): View {
+        _binding = FragmentCourseUnitContainerBinding.inflate(inflater, container, false)
+        return binding.root
     }
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
         val insetHolder = requireActivity() as InsetHolder
-        val statusBarParams = binding.statusBarInset.layoutParams as ConstraintLayout.LayoutParams
-        statusBarParams.topMargin = insetHolder.topInset
-        binding.statusBarInset.layoutParams = statusBarParams
-        val bottomNavigationParams =
-            binding.cvNavigationBar.layoutParams as ConstraintLayout.LayoutParams
-        bottomNavigationParams.bottomMargin = insetHolder.bottomInset
-        binding.cvNavigationBar.layoutParams = bottomNavigationParams
-        val containerParams =
-            binding.viewPager.layoutParams as FrameLayout.LayoutParams
+        val containerParams = binding.viewPager.layoutParams as ConstraintLayout.LayoutParams
         containerParams.bottomMargin = insetHolder.bottomInset
         binding.viewPager.layoutParams = containerParams
 
+        binding.mediaRouteButton.setAlwaysVisible(true)
+        CastButtonFactory.setUpMediaRouteButton(requireContext(), binding.mediaRouteButton)
+
         initViewPager()
-        if (savedInstanceState == null) {
+        if (savedInstanceState == null && componentId.isEmpty()) {
             val currentBlockIndex = viewModel.getUnitBlocks().indexOfFirst {
                 viewModel.getCurrentBlock().id == it.id
             }
@@ -86,147 +110,132 @@ class CourseUnitContainerFragment : Fragment(R.layout.fragment_course_unit_conta
                 binding.viewPager.currentItem = currentBlockIndex
             }
         }
+        if (componentId.isEmpty().not()) {
+            lifecycleScope.launch(Dispatchers.Main) {
+                viewModel.indexInContainer.value?.let { index ->
+                    binding.viewPager.setCurrentItem(index, true)
+                }
+            }
+            requireArguments().putString(ARG_COMPONENT_ID, "")
+            componentId = ""
+        }
 
         binding.cvNavigationBar.setContent {
-            OpenEdXTheme {
-                var nextButtonText by rememberSaveable {
-                    mutableStateOf(viewModel.nextButtonText)
-                }
-                var hasNextBlock by rememberSaveable {
-                    mutableStateOf(viewModel.hasNextBlock)
-                }
-                var hasPrevBlock by rememberSaveable {
-                    mutableStateOf(viewModel.hasNextBlock)
-                }
+            NavigationBar()
+        }
 
-                val windowSize = rememberWindowSize()
+        if (viewModel.isCourseUnitProgressEnabled) {
+            binding.horizontalProgress.setContent {
+                OpenEdXTheme {
+                    val index by viewModel.indexInContainer.observeAsState(0)
+                    val descendantsBlocks by viewModel.descendantsBlocks.collectAsState()
 
-                updateNavigationButtons { next, hasPrev, hasNext ->
-                    nextButtonText = next
-                    hasPrevBlock = hasPrev
-                    hasNextBlock = hasNext
+                    HorizontalPageIndicator(
+                        blocks = descendantsBlocks,
+                        selectedPage = index,
+                        completedColor = MaterialTheme.appColors.componentHorizontalProgressCompleted,
+                        selectedColor = MaterialTheme.appColors.componentHorizontalProgressSelected,
+                        defaultColor = MaterialTheme.appColors.componentHorizontalProgressDefault
+                    )
                 }
-
-                NavigationUnitsButtons(
-                    windowSize = windowSize,
-                    hasPrevBlock = hasPrevBlock,
-                    nextButtonText = nextButtonText,
-                    hasNextBlock = hasNextBlock,
-                    onPrevClick = {
-                        if (!restrictDoubleClick()) {
-                            val block = viewModel.moveToPrevBlock()
-                            if (block != null) {
-                                viewModel.prevBlockClickedEvent(block.blockId, block.displayName)
-                                if (!block.type.isContainer()) {
-                                    binding.viewPager.setCurrentItem(
-                                        binding.viewPager.currentItem - 1,
-                                        true
-                                    )
-                                    updateNavigationButtons { next, hasPrev, hasNext ->
-                                        nextButtonText = next
-                                        hasPrevBlock = hasPrev
-                                        hasNextBlock = hasNext
-                                    }
-                                }
-                            }
-                        }
-                    },
-                    onNextClick = {
-                        if (!restrictDoubleClick()) {
-                            val block = viewModel.moveToNextBlock()
-                            if (block != null) {
-                                viewModel.nextBlockClickedEvent(block.blockId, block.displayName)
-                                if (!block.type.isContainer()) {
-                                    binding.viewPager.setCurrentItem(
-                                        binding.viewPager.currentItem + 1,
-                                        true
-                                    )
-                                    updateNavigationButtons { next, hasPrev, hasNext ->
-                                        nextButtonText = next
-                                        hasPrevBlock = hasPrev
-                                        hasNextBlock = hasNext
-                                    }
-                                }
-                            } else {
-                                val currentVerticalBlock = viewModel.getCurrentVerticalBlock()
-                                val nextVerticalBlock = viewModel.getNextVerticalBlock()
-                                val dialog = ChapterEndFragmentDialog.newInstance(
-                                    currentVerticalBlock?.displayName ?: "",
-                                    nextVerticalBlock?.displayName ?: ""
-                                )
-                                currentVerticalBlock?.let {
-                                    viewModel.finishVerticalClickedEvent(
-                                        it.blockId,
-                                        it.displayName
-                                    )
-                                }
-                                dialog.listener = object : DialogListener {
-                                    override fun <T> onClick(value: T) {
-                                        viewModel.proceedToNext()
-                                        val nextBlock = viewModel.getCurrentVerticalBlock()
-                                        nextBlock?.let {
-                                            viewModel.finishVerticalNextClickedEvent(
-                                                it.blockId,
-                                                it.displayName
-                                            )
-                                            if (it.type.isContainer()) {
-                                                router.replaceCourseContainer(
-                                                    requireActivity().supportFragmentManager,
-                                                    it.id,
-                                                    viewModel.courseId,
-                                                    requireArguments().getString(
-                                                        ARG_COURSE_NAME,
-                                                        ""
-                                                    ),
-                                                    requireArguments().serializable(ARG_MODE)!!
-                                                )
-                                            }
-                                        }
-                                    }
-
-                                    override fun onDismiss() {
-                                        viewModel.finishVerticalBackClickedEvent()
-                                    }
-                                }
-                                dialog.show(
-                                    requireActivity().supportFragmentManager,
-                                    ChapterEndFragmentDialog::class.simpleName
-                                )
-                            }
-                        }
-                    }
-                )
             }
-        }
+            binding.horizontalProgress.isVisible = true
 
-        binding.cvCount.setContent {
-            OpenEdXTheme {
-
-                val index by viewModel.indexInContainer.observeAsState(1)
-                val units by viewModel.verticalBlockCounts.observeAsState(1)
-
-                VerticalPageIndicator(
-                    numberOfPages = units,
-                    selectedColor = MaterialTheme.appColors.primary,
-                    defaultColor = MaterialTheme.appColors.bottomSheetToggle,
-                    selectedPage = index,
-                    defaultRadius = 3.dp,
-                    selectedLength = 5.dp,
-                    modifier = Modifier
-                        .width(24.dp)
-                        .padding(end = 6.dp)
-                )
+        } else {
+            binding.cvCount.setContent {
+                OpenEdXTheme {
+                    val index by viewModel.indexInContainer.observeAsState(0)
+                    val units by viewModel.verticalBlockCounts.observeAsState(0)
+
+                    VerticalPageIndicator(
+                        numberOfPages = units,
+                        selectedColor = MaterialTheme.appColors.primary,
+                        defaultColor = MaterialTheme.appColors.bottomSheetToggle,
+                        selectedPage = index,
+                        defaultRadius = 3.dp,
+                        selectedLength = 5.dp,
+                        modifier = Modifier
+                            .width(24.dp)
+                    )
+                }
             }
+            binding.cvCount.isVisible = true
         }
 
         binding.btnBack.setContent {
-            OpenEdXTheme {
-                BackBtn {
+            val title = if (viewModel.isCourseExpandableSectionsEnabled) {
+                val unitBlocks by viewModel.subSectionUnitBlocks.collectAsState()
+                unitBlocks.firstOrNull()?.let {
+                    viewModel.getSubSectionBlock(it.id).displayName
+                } ?: ""
+
+            } else {
+                val index by viewModel.indexInContainer.observeAsState(0)
+                val descendantsBlocks by viewModel.descendantsBlocks.collectAsState()
+                descendantsBlocks[index].displayName
+            }
+
+            CourseUnitToolbar(
+                title = title,
+                onBackClick = {
                     requireActivity().supportFragmentManager.popBackStack()
                 }
+            )
+        }
+
+        if (viewModel.isCourseExpandableSectionsEnabled) {
+            binding.subSectionUnitsTitle.setContent {
+                val unitBlocks by viewModel.subSectionUnitBlocks.collectAsState()
+                val currentUnit = unitBlocks.firstOrNull { it.id == unitId }
+                val unitName = currentUnit?.displayName ?: ""
+                val unitsListShowed by viewModel.unitsListShowed.observeAsState(false)
+
+                OpenEdXTheme {
+                    SubSectionUnitsTitle(
+                        unitName = unitName,
+                        unitsCount = unitBlocks.size,
+                        unitsListShowed = unitsListShowed,
+                        onUnitsClick = { handleUnitsClick() }
+                    )
+                }
+            }
+
+            binding.subSectionUnitsBg.setOnClickListener { handleUnitsClick() }
+
+            binding.subSectionUnitsList.setContent {
+                val unitBlocks by viewModel.subSectionUnitBlocks.collectAsState()
+                val selectedUnitIndex = unitBlocks.indexOfFirst { it.id == unitId }
+                OpenEdXTheme {
+                    SubSectionUnitsList(
+                        unitBlocks = unitBlocks,
+                        selectedUnitIndex = selectedUnitIndex
+                    ) { index, unit ->
+                        if (index != selectedUnitIndex) {
+                            router.replaceCourseContainer(
+                                fm = requireActivity().supportFragmentManager,
+                                courseId = viewModel.courseId,
+                                unitId = unit.id,
+                                mode = requireArguments().serializable(ARG_MODE)!!
+                            )
+
+                        } else {
+                            handleUnitsClick()
+                        }
+                    }
+                }
             }
+
+        } else {
+            binding.subSectionUnitsTitle.isGone = true
         }
 
+        if (viewModel.unitsListShowed.value == true) handleUnitsClick()
+    }
+
+    override fun onDestroyView() {
+        binding.viewPager.unregisterOnPageChangeCallback(onPageChangeCallback)
+        super.onDestroyView()
+        _binding = null
     }
 
     private fun updateNavigationButtons(updatedData: (String, Boolean, Boolean) -> Unit) {
@@ -251,35 +260,168 @@ class CourseUnitContainerFragment : Fragment(R.layout.fragment_course_unit_conta
     }
 
     private fun initViewPager() {
-        binding.viewPager.orientation = ViewPager2.ORIENTATION_VERTICAL
+        if (!viewModel.isCourseUnitProgressEnabled) {
+            binding.viewPager.orientation = ViewPager2.ORIENTATION_VERTICAL
+        }
         binding.viewPager.offscreenPageLimit = 1
-        adapter = CourseUnitContainerAdapter(this, viewModel, viewModel.getUnitBlocks())
+        adapter = CourseUnitContainerAdapter(this, viewModel.getUnitBlocks(), viewModel)
         binding.viewPager.adapter = adapter
         binding.viewPager.isUserInputEnabled = false
+        binding.viewPager.registerOnPageChangeCallback(onPageChangeCallback)
+    }
+
+    private fun handlePrevClick(buttonChanged: (String, Boolean, Boolean) -> Unit) {
+        if (!restrictDoubleClick()) {
+            val block = viewModel.moveToPrevBlock()
+            if (block != null) {
+                viewModel.prevBlockClickedEvent(block.blockId, block.displayName)
+                if (!block.type.isContainer()) {
+                    val prevIndex = binding.viewPager.currentItem - 1
+                    binding.viewPager.setCurrentItem(prevIndex, true)
+                    updateNavigationButtons { next, hasPrev, hasNext ->
+                        buttonChanged(next, hasPrev, hasNext)
+                    }
+                }
+            }
+        }
+    }
+
+    private fun handleNextClick(buttonChanged: (String, Boolean, Boolean) -> Unit) {
+        if (!restrictDoubleClick()) {
+            val block = viewModel.moveToNextBlock()
+            if (block != null) {
+                viewModel.nextBlockClickedEvent(block.blockId, block.displayName)
+                if (!block.type.isContainer()) {
+                    val nextIndex = binding.viewPager.currentItem + 1
+                    binding.viewPager.setCurrentItem(nextIndex, true)
+                    updateNavigationButtons { next, hasPrev, hasNext ->
+                        buttonChanged(next, hasPrev, hasNext)
+                    }
+                }
+            } else {
+                val currentVerticalBlock = viewModel.getCurrentVerticalBlock()
+                val nextVerticalBlock = viewModel.getNextVerticalBlock()
+                val dialog = ChapterEndFragmentDialog.newInstance(
+                    currentVerticalBlock?.displayName ?: "",
+                    nextVerticalBlock?.displayName ?: "",
+                    !viewModel.isCourseUnitProgressEnabled
+                )
+                currentVerticalBlock?.let {
+                    viewModel.finishVerticalClickedEvent(
+                        it.blockId,
+                        it.displayName
+                    )
+                }
+                dialog.listener = object : DialogListener {
+                    override fun <T> onClick(value: T) {
+                        viewModel.proceedToNext()
+                        val nextBlock = viewModel.getCurrentVerticalBlock()
+                        nextBlock?.let {
+                            viewModel.finishVerticalNextClickedEvent(
+                                it.blockId,
+                                it.displayName
+                            )
+                            if (it.type.isContainer()) {
+                                router.replaceCourseContainer(
+                                    fm = requireActivity().supportFragmentManager,
+                                    courseId = viewModel.courseId,
+                                    unitId = it.id,
+                                    mode = requireArguments().serializable(ARG_MODE)!!
+                                )
+                            }
+                        }
+                    }
+
+                    override fun onDismiss() {
+                        viewModel.finishVerticalBackClickedEvent()
+                    }
+                }
+                dialog.show(
+                    requireActivity().supportFragmentManager,
+                    ChapterEndFragmentDialog::class.simpleName
+                )
+            }
+        }
+    }
+
+    private fun handleUnitsClick() {
+        if (binding.subSectionUnitsList.visibility == View.VISIBLE) {
+            binding.subSectionUnitsList.visibility = View.GONE
+            binding.subSectionUnitsBg.visibility = View.GONE
+            viewModel.setUnitsListVisibility(false)
+
+        } else {
+            binding.subSectionUnitsList.visibility = View.VISIBLE
+            binding.subSectionUnitsBg.visibility = View.VISIBLE
+            viewModel.setUnitsListVisibility(true)
+        }
+    }
+
+    @Composable
+    private fun NavigationBar() {
+        OpenEdXTheme {
+            var nextButtonText by rememberSaveable {
+                mutableStateOf(viewModel.nextButtonText)
+            }
+            var hasNextBlock by rememberSaveable {
+                mutableStateOf(viewModel.hasNextBlock)
+            }
+            var hasPrevBlock by rememberSaveable {
+                mutableStateOf(viewModel.hasNextBlock)
+            }
+
+            updateNavigationButtons { next, hasPrev, hasNext ->
+                nextButtonText = next
+                hasPrevBlock = hasPrev
+                hasNextBlock = hasNext
+            }
+            val windowSize = rememberWindowSize()
+
+            NavigationUnitsButtons(
+                windowSize = windowSize,
+                hasPrevBlock = hasPrevBlock,
+                nextButtonText = nextButtonText,
+                hasNextBlock = hasNextBlock,
+                isVerticalNavigation = !viewModel.isCourseUnitProgressEnabled,
+                onPrevClick = {
+                    handlePrevClick { next, hasPrev, hasNext ->
+                        nextButtonText = next
+                        hasPrevBlock = hasPrev
+                        hasNextBlock = hasNext
+                    }
+                },
+                onNextClick = {
+                    handleNextClick { next, hasPrev, hasNext ->
+                        nextButtonText = next
+                        hasPrevBlock = hasPrev
+                        hasNextBlock = hasNext
+                    }
+                }
+            )
+        }
     }
 
     companion object {
 
-        private const val ARG_BLOCK_ID = "blockId"
         private const val ARG_COURSE_ID = "courseId"
-        private const val ARG_COURSE_NAME = "courseName"
+        private const val UNIT_ID = "unitId"
+        private const val ARG_COMPONENT_ID = "componentId"
         private const val ARG_MODE = "mode"
 
         fun newInstance(
-            blockId: String,
             courseId: String,
-            courseName: String,
+            unitId: String,
+            componentId: String?,
             mode: CourseViewMode,
         ): CourseUnitContainerFragment {
             val fragment = CourseUnitContainerFragment()
             fragment.arguments = bundleOf(
-                ARG_BLOCK_ID to blockId,
                 ARG_COURSE_ID to courseId,
-                ARG_COURSE_NAME to courseName,
+                UNIT_ID to unitId,
+                ARG_COMPONENT_ID to componentId,
                 ARG_MODE to mode
             )
             return fragment
         }
     }
-
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModel.kt b/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModel.kt
index 553c1a1c7..0b6df71d4 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModel.kt
@@ -3,8 +3,15 @@ package org.openedx.course.presentation.unit.container
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.first
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.runBlocking
 import org.openedx.core.BaseViewModel
 import org.openedx.core.BlockType
+import org.openedx.core.config.Config
 import org.openedx.core.domain.model.Block
 import org.openedx.core.extension.clearAndAddAll
 import org.openedx.core.extension.indexOfFirstFromIndex
@@ -13,14 +20,12 @@ import org.openedx.core.module.db.DownloadedState
 import org.openedx.core.presentation.course.CourseViewMode
 import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.core.system.notifier.CourseSectionChanged
+import org.openedx.core.system.notifier.CourseStructureUpdated
 import org.openedx.course.domain.interactor.CourseInteractor
 import org.openedx.course.presentation.CourseAnalytics
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.flow.first
-import kotlinx.coroutines.launch
-import kotlinx.coroutines.runBlocking
 
 class CourseUnitContainerViewModel(
+    private val config: Config,
     private val interactor: CourseInteractor,
     private val notifier: CourseNotifier,
     private val analytics: CourseAnalytics,
@@ -29,20 +34,24 @@ class CourseUnitContainerViewModel(
 
     private val blocks = ArrayList<Block>()
 
-    var currentIndex = 0
-        private set
-    var currentVerticalIndex = 0
-        private set
+    val isCourseExpandableSectionsEnabled get() = config.isCourseNestedListEnabled()
+
+    val isCourseUnitProgressEnabled get() = config.isCourseUnitProgressEnabled()
+
+    private var currentIndex = 0
+    private var currentVerticalIndex = 0
     private var currentSectionIndex = -1
 
     val isFirstIndexInContainer: Boolean
         get() {
-            return descendants.first() == descendants[currentIndex]
+            return _descendantsBlocks.value.firstOrNull() ==
+                    _descendantsBlocks.value.getOrNull(currentIndex)
         }
 
     val isLastIndexInContainer: Boolean
         get() {
-            return descendants.last() == descendants[currentIndex]
+            return _descendantsBlocks.value.lastOrNull() ==
+                    _descendantsBlocks.value.getOrNull(currentIndex)
         }
 
     private val _verticalBlockCounts = MutableLiveData<Int>()
@@ -53,13 +62,24 @@ class CourseUnitContainerViewModel(
     val indexInContainer: LiveData<Int>
         get() = _indexInContainer
 
+    private val _unitsListShowed = MutableLiveData<Boolean>()
+    val unitsListShowed: LiveData<Boolean>
+        get() = _unitsListShowed
+
+    private val _subSectionUnitBlocks = MutableStateFlow<List<Block>>(listOf())
+    val subSectionUnitBlocks = _subSectionUnitBlocks.asStateFlow()
+
     var nextButtonText = ""
     var hasNextBlock = false
+
+    private var currentMode: CourseViewMode? = null
     private var courseName = ""
 
-    private val descendants = mutableListOf<String>()
+    private val _descendantsBlocks = MutableStateFlow<List<Block>>(listOf())
+    val descendantsBlocks = _descendantsBlocks.asStateFlow()
 
     fun loadBlocks(mode: CourseViewMode) {
+        currentMode = mode
         try {
             val courseStructure = when (mode) {
                 CourseViewMode.FULL -> interactor.getCourseStructureFromCache()
@@ -75,28 +95,87 @@ class CourseUnitContainerViewModel(
 
     init {
         _indexInContainer.value = 0
+
+        viewModelScope.launch {
+            notifier.notifier.collect { event ->
+                if (event is CourseStructureUpdated) {
+                    if (event.courseId != courseId) return@collect
+
+                    currentMode?.let { loadBlocks(it) }
+                    val blockId = blocks[currentVerticalIndex].id
+                    _subSectionUnitBlocks.value =
+                        getSubSectionUnitBlocks(blocks, getSubSectionId(blockId))
+                }
+            }
+        }
     }
 
-    fun setupCurrentIndex(blockId: String) {
+    fun setupCurrentIndex(unitId: String, componentId: String = "") {
+        if (currentSectionIndex != -1) {
+            return
+        }
         blocks.forEachIndexed { index, block ->
-            if (block.id == blockId) {
+            if (block.id == unitId) {
                 currentVerticalIndex = index
                 currentSectionIndex = blocks.indexOfFirst {
                     it.descendants.contains(blocks[currentVerticalIndex].id)
                 }
-                if (block.descendants.isNotEmpty()) {
-                    descendants.clearAndAddAll(block.descendants)
+                if (block.descendants.isNotEmpty() || block.isGated()) {
+                    _descendantsBlocks.value =
+                        block.descendants.mapNotNull { descendant ->
+                            blocks.firstOrNull { descendant == it.id }
+                        }
+                    _subSectionUnitBlocks.value =
+                        getSubSectionUnitBlocks(blocks, getSubSectionId(unitId))
+
                 } else {
                     setNextVerticalIndex()
                 }
                 if (currentVerticalIndex != -1) {
                     _verticalBlockCounts.value = blocks[currentVerticalIndex].descendants.size
                 }
+                if (componentId.isNotEmpty()) {
+                    currentIndex = _descendantsBlocks.value.indexOfFirst { it.id == componentId }
+                    _indexInContainer.value = currentIndex
+                }
                 return
             }
         }
     }
 
+    private fun getSubSectionId(blockId: String): String {
+        return blocks.firstOrNull { it.descendants.contains(blockId) }?.id ?: ""
+    }
+
+    private fun getSubSectionUnitBlocks(blocks: List<Block>, id: String): List<Block> {
+        val resultList = mutableListOf<Block>()
+        if (blocks.isEmpty()) return emptyList()
+        val selectedBlock = blocks.first { it.id == id }
+
+        for (descendant in selectedBlock.descendants) {
+            val blockDescendant = blocks.find {
+                it.id == descendant
+            }
+            if (blockDescendant != null) {
+                if (blockDescendant.type == BlockType.VERTICAL) {
+                    resultList.add(blockDescendant.copy(type = getUnitType(blockDescendant.descendants)))
+                }
+            } else continue
+        }
+        return resultList
+    }
+
+    private fun getUnitType(descendant: List<String>): BlockType {
+        val descendantBlocks = blocks.filter { descendant.contains(it.id) }
+
+        return when {
+            descendantBlocks.any { it.isProblemBlock } -> BlockType.PROBLEM
+            descendantBlocks.any { it.isVideoBlock } -> BlockType.VIDEO
+            descendantBlocks.any { it.isDiscussionBlock } -> BlockType.DISCUSSION
+            else -> BlockType.OTHERS
+        }
+    }
+
     private fun setNextVerticalIndex() {
         currentVerticalIndex = blocks.indexOfFirstFromIndex(currentVerticalIndex) {
             it.type == BlockType.VERTICAL
@@ -130,21 +209,16 @@ class CourseUnitContainerViewModel(
     }
 
     fun moveToNextBlock(): Block? {
-        for (i in currentIndex + 1 until descendants.size) {
-            val block = blocks.firstOrNull { descendants[i] == it.id }
-            currentIndex = i
-            if (currentVerticalIndex != -1) {
-                _indexInContainer.value = currentIndex
-            }
-            return block
-        }
-        return null
+        return moveToBlock(currentIndex + 1)
     }
 
     fun moveToPrevBlock(): Block? {
-        for (i in currentIndex - 1 downTo 0) {
-            val block = blocks.firstOrNull { descendants[i] == it.id }
-            currentIndex = i
+        return moveToBlock(currentIndex - 1)
+    }
+
+    private fun moveToBlock(index: Int): Block? {
+        _descendantsBlocks.value.getOrNull(index)?.let { block ->
+            currentIndex = index
             if (currentVerticalIndex != -1) {
                 _indexInContainer.value = currentIndex
             }
@@ -168,7 +242,11 @@ class CourseUnitContainerViewModel(
         return blocks.getOrNull(index)
     }
 
-    fun getUnitBlocks(): List<Block> = blocks.filter { descendants.contains(it.id) }
+    fun getUnitBlocks(): List<Block> = _descendantsBlocks.value
+
+    fun getSubSectionBlock(unitId: String): Block {
+        return blocks.first { it.descendants.contains(unitId) }
+    }
 
     fun nextBlockClickedEvent(blockId: String, blockName: String) {
         analytics.nextBlockClickedEvent(courseId, courseName, blockId, blockName)
@@ -189,4 +267,8 @@ class CourseUnitContainerViewModel(
     fun finishVerticalBackClickedEvent() {
         analytics.finishVerticalBackClickedEvent(courseId, courseName)
     }
+
+    fun setUnitsListVisibility(isVisible: Boolean) {
+        _unitsListShowed.value = isVisible
+    }
 }
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt
index b4724fcb7..124ceb327 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitFragment.kt
@@ -2,6 +2,8 @@ package org.openedx.course.presentation.unit.html
 
 import android.annotation.SuppressLint
 import android.content.Intent
+import android.content.res.Configuration
+import android.graphics.Bitmap
 import android.net.Uri
 import android.os.Bundle
 import android.util.Log
@@ -9,13 +11,17 @@ import android.view.LayoutInflater
 import android.view.ViewGroup
 import android.webkit.*
 import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.*
 import androidx.compose.runtime.*
 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.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.unit.Dp
@@ -24,23 +30,18 @@ import androidx.compose.ui.viewinterop.AndroidView
 import androidx.compose.ui.zIndex
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import kotlinx.coroutines.launch
+import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.core.extension.isEmailValid
 import org.openedx.core.system.AppCookieManager
-import org.openedx.core.system.connection.NetworkConnection
-import org.openedx.core.ui.WindowSize
-import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.*
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
-import org.openedx.core.ui.windowSizeValue
 import org.openedx.core.utils.EmailUtil
-import org.openedx.course.presentation.ui.ConnectionErrorView
-import kotlinx.coroutines.launch
-import org.koin.android.ext.android.inject
 
 class HtmlUnitFragment : Fragment() {
 
-    private val edxCookieManager by inject<AppCookieManager>()
-    private val networkConnection by inject<NetworkConnection>()
+    private val viewModel by viewModel<HtmlUnitViewModel>()
     private var blockId: String = ""
     private var blockUrl: String = ""
 
@@ -65,25 +66,59 @@ class HtmlUnitFragment : Fragment() {
                 }
 
                 var hasInternetConnection by remember {
-                    mutableStateOf(networkConnection.isOnline())
+                    mutableStateOf(viewModel.isOnline)
+                }
+
+                val injectJSList by viewModel.injectJSList.collectAsState()
+
+                val configuration = LocalConfiguration.current
+
+                val bottomPadding =
+                    if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
+                        72.dp
+                    } else {
+                        0.dp
+                    }
+
+                val border = if (!isSystemInDarkTheme() && !viewModel.isCourseUnitProgressEnabled) {
+                    Modifier.roundBorderWithoutBottom(
+                        borderWidth = 2.dp,
+                        cornerRadius = 30.dp
+                    )
+                } else {
+                    Modifier
                 }
+
                 Surface(
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp)),
                     color = Color.White
                 ) {
                     Box(
                         modifier = Modifier
                             .fillMaxSize()
+                            .padding(bottom = bottomPadding)
                             .background(Color.White)
-                            .padding(bottom = 72.dp),
+                            .then(border),
                         contentAlignment = Alignment.TopCenter
                     ) {
                         if (hasInternetConnection) {
                             HTMLContentView(
                                 windowSize = windowSize,
                                 url = blockUrl,
-                                cookieManager = edxCookieManager,
+                                cookieManager = viewModel.cookieManager,
+                                apiHostURL = viewModel.apiHostURL,
+                                isLoading = isLoading,
+                                injectJSList = injectJSList,
+                                onCompletionSet = {
+                                    viewModel.notifyCompletionSet()
+                                },
+                                onWebPageLoading = {
+                                    isLoading = true
+                                },
                                 onWebPageLoaded = {
                                     isLoading = false
+                                    viewModel.setWebPageLoaded(requireContext().assets)
                                 }
                             )
                         } else {
@@ -93,7 +128,7 @@ class HtmlUnitFragment : Fragment() {
                                     .fillMaxHeight()
                                     .background(MaterialTheme.appColors.background)
                             ) {
-                                hasInternetConnection = networkConnection.isOnline()
+                                hasInternetConnection = viewModel.isOnline
                             }
                         }
                         if (isLoading && hasInternetConnection) {
@@ -136,6 +171,11 @@ private fun HTMLContentView(
     windowSize: WindowSize,
     url: String,
     cookieManager: AppCookieManager,
+    apiHostURL: String,
+    isLoading: Boolean,
+    injectJSList: List<String>,
+    onCompletionSet: () -> Unit,
+    onWebPageLoading: () -> Unit,
     onWebPageLoaded: () -> Unit,
 ) {
     val coroutineScope = rememberCoroutineScope()
@@ -156,8 +196,20 @@ private fun HTMLContentView(
             .background(MaterialTheme.appColors.background),
         factory = {
             WebView(context).apply {
+                addJavascriptInterface(object {
+                    @Suppress("unused")
+                    @JavascriptInterface
+                    fun completionSet() {
+                        onCompletionSet()
+                    }
+                }, "callback")
                 webViewClient = object : WebViewClient() {
 
+                    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
+                        super.onPageStarted(view, url, favicon)
+                        onWebPageLoading()
+                    }
+
                     override fun onPageCommitVisible(view: WebView?, url: String?) {
                         super.onPageCommitVisible(view, url)
                         Log.d("HTML", "onPageCommitVisible")
@@ -193,7 +245,7 @@ private fun HTMLContentView(
                         request: WebResourceRequest,
                         errorResponse: WebResourceResponse,
                     ) {
-                        if (request.url.toString() == view.url) {
+                        if (request.url.toString().startsWith(apiHostURL)) {
                             when (errorResponse.statusCode) {
                                 403, 401, 404 -> {
                                     coroutineScope.launch {
@@ -218,5 +270,11 @@ private fun HTMLContentView(
                 isHorizontalScrollBarEnabled = false
                 loadUrl(url)
             }
+        },
+        update = { webView ->
+            if (!isLoading && injectJSList.isNotEmpty()) {
+                injectJSList.forEach { webView.evaluateJavascript(it, null) }
+            }
         })
-}
\ No newline at end of file
+}
+
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitViewModel.kt b/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitViewModel.kt
new file mode 100644
index 000000000..c65fcb33e
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/unit/html/HtmlUnitViewModel.kt
@@ -0,0 +1,49 @@
+package org.openedx.course.presentation.unit.html
+
+import android.content.res.AssetManager
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import org.openedx.core.BaseViewModel
+import org.openedx.core.config.Config
+import org.openedx.core.extension.readAsText
+import org.openedx.core.system.AppCookieManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.CourseCompletionSet
+import org.openedx.core.system.notifier.CourseNotifier
+
+class HtmlUnitViewModel(
+    private val config: Config,
+    private val edxCookieManager: AppCookieManager,
+    private val networkConnection: NetworkConnection,
+    private val notifier: CourseNotifier
+) : BaseViewModel() {
+
+    private val _injectJSList = MutableStateFlow<List<String>>(listOf())
+    val injectJSList = _injectJSList.asStateFlow()
+
+    val isOnline get() = networkConnection.isOnline()
+    val isCourseUnitProgressEnabled get() = config.isCourseUnitProgressEnabled()
+    val apiHostURL get() = config.getApiHostURL()
+    val cookieManager get() = edxCookieManager
+
+    fun setWebPageLoaded(assets: AssetManager) {
+        if (_injectJSList.value.isNotEmpty()) return
+
+        val jsList = mutableListOf<String>()
+
+        //Injection to intercept completion state for xBlocks
+        assets.readAsText("js_injection/completions.js")?.let { jsList.add(it) }
+        //Injection to fix CSS issues for Survey xBlock
+        assets.readAsText("js_injection/survey_css.js")?.let { jsList.add(it) }
+
+        _injectJSList.value = jsList
+    }
+
+    fun notifyCompletionSet() {
+        viewModelScope.launch {
+            notifier.send(CourseCompletionSet())
+        }
+    }
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/EncodedVideoUnitViewModel.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/EncodedVideoUnitViewModel.kt
new file mode 100644
index 000000000..73b15366f
--- /dev/null
+++ b/course/src/main/java/org/openedx/course/presentation/unit/video/EncodedVideoUnitViewModel.kt
@@ -0,0 +1,145 @@
+package org.openedx.course.presentation.unit.video
+
+import android.content.Context
+import androidx.lifecycle.LifecycleOwner
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.MutableLiveData
+import androidx.media3.cast.CastPlayer
+import androidx.media3.common.Player
+import androidx.media3.common.util.Clock
+import androidx.media3.exoplayer.DefaultLoadControl
+import androidx.media3.exoplayer.DefaultRenderersFactory
+import androidx.media3.exoplayer.ExoPlayer
+import androidx.media3.exoplayer.analytics.DefaultAnalyticsCollector
+import androidx.media3.exoplayer.source.DefaultMediaSourceFactory
+import androidx.media3.exoplayer.trackselection.AdaptiveTrackSelection
+import androidx.media3.exoplayer.trackselection.DefaultTrackSelector
+import androidx.media3.exoplayer.upstream.DefaultBandwidthMeter
+import androidx.media3.extractor.DefaultExtractorsFactory
+import com.google.android.gms.cast.framework.CastContext
+import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.domain.model.VideoQuality
+import org.openedx.core.module.TranscriptManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.CourseNotifier
+import org.openedx.course.data.repository.CourseRepository
+import java.util.concurrent.Executors
+
+class EncodedVideoUnitViewModel(
+    courseId: String,
+    val blockId: String,
+    courseRepository: CourseRepository,
+    notifier: CourseNotifier,
+    networkConnection: NetworkConnection,
+    transcriptManager: TranscriptManager,
+    val preferencesManager: CorePreferences,
+    private val context: Context,
+) : VideoUnitViewModel(
+    courseId,
+    courseRepository,
+    notifier,
+    networkConnection,
+    transcriptManager
+) {
+
+    private val _isVideoEnded = MutableLiveData(false)
+    val isVideoEnded: LiveData<Boolean>
+        get() = _isVideoEnded
+
+    var exoPlayer: ExoPlayer? = null
+        private set
+    var castPlayer: CastPlayer? = null
+        private set
+    private var castContext: CastContext? = null
+
+    var isCastActive = false
+
+    var isPlayerSetUp = false
+
+    private val exoPlayerListener = object : Player.Listener {
+        override fun onPlayWhenReadyChanged(playWhenReady: Boolean, reason: Int) {
+            super.onPlayWhenReadyChanged(playWhenReady, reason)
+            isPlaying = playWhenReady
+        }
+
+        override fun onPlaybackStateChanged(playbackState: Int) {
+            super.onPlaybackStateChanged(playbackState)
+            if (playbackState == Player.STATE_ENDED) {
+                _isVideoEnded.value = true
+                markBlockCompleted(blockId)
+            }
+        }
+    }
+
+    @androidx.media3.common.util.UnstableApi
+    override fun onCreate(owner: LifecycleOwner) {
+        super.onCreate(owner)
+        if (exoPlayer != null) {
+            return
+        }
+        initPlayer()
+
+        val executor = Executors.newSingleThreadExecutor()
+        castContext = CastContext.getSharedInstance(context, executor).result
+        castContext?.let {
+            castPlayer = CastPlayer(it)
+        }
+    }
+
+    override fun onResume(owner: LifecycleOwner) {
+        super.onResume(owner)
+        exoPlayer?.addListener(exoPlayerListener)
+        getActivePlayer()?.playWhenReady = isPlaying
+    }
+
+    override fun onPause(owner: LifecycleOwner) {
+        super.onPause(owner)
+        exoPlayer?.removeListener(exoPlayerListener)
+        exoPlayer?.pause()
+    }
+
+    fun getActivePlayer(): Player? {
+        return if (isCastActive) {
+            castPlayer
+        } else {
+            exoPlayer
+        }
+    }
+
+    @androidx.media3.common.util.UnstableApi
+    fun releasePlayers() {
+        exoPlayer?.release()
+        castPlayer?.release()
+        exoPlayer = null
+        castPlayer = null
+    }
+
+    @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
+    fun initPlayer() {
+        val videoQuality = getVideoQuality()
+        val params = DefaultTrackSelector.Parameters.Builder(context)
+            .apply {
+                if (videoQuality != VideoQuality.AUTO) {
+                    setMaxVideoSize(videoQuality.width, videoQuality.height)
+                    setViewportSize(videoQuality.width, videoQuality.height, false)
+                }
+            }
+            .build()
+
+        val factory = AdaptiveTrackSelection.Factory()
+        val selector = DefaultTrackSelector(context, factory)
+        selector.parameters = params
+
+        exoPlayer = ExoPlayer.Builder(
+            context,
+            DefaultRenderersFactory(context),
+            DefaultMediaSourceFactory(context, DefaultExtractorsFactory()),
+            selector,
+            DefaultLoadControl(),
+            DefaultBandwidthMeter.getSingletonInstance(context),
+            DefaultAnalyticsCollector(Clock.DEFAULT)
+        ).build()
+    }
+
+    private fun getVideoQuality() = preferencesManager.videoSettings.videoQuality
+}
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoFullScreenFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoFullScreenFragment.kt
index 8bbd649d4..78133286e 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoFullScreenFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoFullScreenFragment.kt
@@ -1,7 +1,6 @@
 package org.openedx.course.presentation.unit.video
 
 import android.annotation.SuppressLint
-import android.content.pm.ActivityInfo
 import android.os.Bundle
 import android.view.View
 import android.widget.FrameLayout
@@ -11,11 +10,24 @@ import androidx.fragment.app.Fragment
 import androidx.media3.common.C
 import androidx.media3.common.MediaItem
 import androidx.media3.common.Player
+import androidx.media3.common.util.Clock
+import androidx.media3.datasource.DefaultDataSource
+import androidx.media3.exoplayer.DefaultLoadControl
+import androidx.media3.exoplayer.DefaultRenderersFactory
 import androidx.media3.exoplayer.ExoPlayer
+import org.koin.android.ext.android.inject
+import androidx.media3.exoplayer.analytics.DefaultAnalyticsCollector
+import androidx.media3.exoplayer.hls.HlsMediaSource
+import androidx.media3.exoplayer.source.DefaultMediaSourceFactory
+import androidx.media3.exoplayer.trackselection.AdaptiveTrackSelection
+import androidx.media3.exoplayer.trackselection.DefaultTrackSelector
+import androidx.media3.exoplayer.upstream.DefaultBandwidthMeter
+import androidx.media3.extractor.DefaultExtractorsFactory
 import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.koin.core.parameter.parametersOf
+import org.openedx.core.domain.model.VideoQuality
 import org.openedx.core.extension.requestApplyInsetsWhenAttached
-import org.openedx.core.presentation.global.WindowSizeHolder
+import org.openedx.core.presentation.dialog.appreview.AppReviewManager
 import org.openedx.core.presentation.global.viewBinding
 import org.openedx.course.R
 import org.openedx.course.databinding.FragmentVideoFullScreenBinding
@@ -26,10 +38,26 @@ class VideoFullScreenFragment : Fragment(R.layout.fragment_video_full_screen) {
     private val viewModel by viewModel<VideoViewModel> {
         parametersOf(requireArguments().getString(ARG_COURSE_ID, ""))
     }
+    private val appReviewManager by inject<AppReviewManager> { parametersOf(requireActivity()) }
 
     private var exoPlayer: ExoPlayer? = null
     private var blockId = ""
-    private var isTabletDevice = false
+    private val exoPlayerListener = object : Player.Listener {
+        override fun onPlayWhenReadyChanged(playWhenReady: Boolean, reason: Int) {
+            super.onPlayWhenReadyChanged(playWhenReady, reason)
+            viewModel.isPlaying = playWhenReady
+        }
+
+        override fun onPlaybackStateChanged(playbackState: Int) {
+            super.onPlaybackStateChanged(playbackState)
+            if (playbackState == Player.STATE_ENDED) {
+                if (!appReviewManager.isDialogShowed) {
+                    appReviewManager.tryToOpenRateDialog()
+                }
+                viewModel.markBlockCompleted(blockId)
+            }
+        }
+    }
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -38,14 +66,8 @@ class VideoFullScreenFragment : Fragment(R.layout.fragment_video_full_screen) {
         if (viewModel.currentVideoTime == 0L) {
             viewModel.currentVideoTime = requireArguments().getLong(ARG_VIDEO_TIME, 0)
         }
-        setOrientationBasedOnDeviceType()
-    }
-
-    private fun setOrientationBasedOnDeviceType() {
-        val windowSize = (requireActivity() as WindowSizeHolder).windowSize
-        isTabletDevice = windowSize.isTablet
-        if (!isTabletDevice) {
-            requireActivity().requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR
+        if (viewModel.isPlaying == null) {
+            viewModel.isPlaying = requireArguments().getBoolean(ARG_IS_PLAYING)
         }
     }
 
@@ -71,16 +93,37 @@ class VideoFullScreenFragment : Fragment(R.layout.fragment_video_full_screen) {
     private fun initPlayer() {
         with(binding) {
             if (exoPlayer == null) {
-                exoPlayer = ExoPlayer.Builder(requireContext())
+                val videoQuality = viewModel.getVideoQuality()
+                val params = DefaultTrackSelector.Parameters.Builder(requireContext())
+                    .apply {
+                        if (videoQuality != VideoQuality.AUTO) {
+                            setMaxVideoSize(videoQuality.width, videoQuality.height)
+                            setViewportSize(videoQuality.width, videoQuality.height, false)
+                        }
+                    }
                     .build()
+
+                val factory = AdaptiveTrackSelection.Factory()
+                val selector = DefaultTrackSelector(requireContext(), factory)
+                selector.parameters = params
+
+                exoPlayer = ExoPlayer.Builder(
+                    requireContext(),
+                    DefaultRenderersFactory(requireContext()),
+                    DefaultMediaSourceFactory(requireContext(), DefaultExtractorsFactory()),
+                    selector,
+                    DefaultLoadControl(),
+                    DefaultBandwidthMeter.getSingletonInstance(requireContext()),
+                    DefaultAnalyticsCollector(Clock.DEFAULT)
+                ).build()
             }
             playerView.player = exoPlayer
             playerView.setShowNextButton(false)
             playerView.setShowPreviousButton(false)
             val mediaItem = MediaItem.fromUri(viewModel.videoUrl)
-            exoPlayer?.setMediaItem(mediaItem, viewModel.currentVideoTime)
+            setPlayerMedia(mediaItem)
             exoPlayer?.prepare()
-            exoPlayer?.playWhenReady = false
+            exoPlayer?.playWhenReady = viewModel.isPlaying ?: false
 
             playerView.setFullscreenButtonClickListener { isFullScreen ->
                 requireActivity().supportFragmentManager.popBackStackImmediate()
@@ -97,19 +140,30 @@ class VideoFullScreenFragment : Fragment(R.layout.fragment_video_full_screen) {
         }
     }
 
+    @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
+    private fun setPlayerMedia(mediaItem: MediaItem) {
+        if (viewModel.videoUrl.endsWith(".m3u8")) {
+            val factory = DefaultDataSource.Factory(requireContext())
+            val mediaSource: HlsMediaSource = HlsMediaSource.Factory(factory).createMediaSource(mediaItem)
+            exoPlayer?.setMediaSource(mediaSource, viewModel.currentVideoTime)
+        } else {
+            exoPlayer?.setMediaItem(
+                mediaItem,
+                viewModel.currentVideoTime
+            )
+        }
+    }
+
     private fun releasePlayer() {
         exoPlayer?.stop()
         exoPlayer?.release()
         exoPlayer = null
     }
 
-
     override fun onPause() {
         super.onPause()
-        if (exoPlayer?.isPlaying == true) {
-            exoPlayer?.pause()
-            exoPlayer?.playWhenReady = false
-        }
+        exoPlayer?.removeListener(exoPlayerListener)
+        exoPlayer?.pause()
     }
 
     override fun onDestroyView() {
@@ -118,33 +172,39 @@ class VideoFullScreenFragment : Fragment(R.layout.fragment_video_full_screen) {
         super.onDestroyView()
     }
 
+
     @SuppressLint("SourceLockedOrientationActivity")
     override fun onDestroy() {
-        if (!isTabletDevice) {
-            requireActivity().requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
-        }
         releasePlayer()
         super.onDestroy()
     }
 
+    override fun onResume() {
+        super.onResume()
+        exoPlayer?.addListener(exoPlayerListener)
+    }
+
     companion object {
         private const val ARG_BLOCK_VIDEO_URL = "blockVideoUrl"
         private const val ARG_VIDEO_TIME = "videoTime"
         private const val ARG_BLOCK_ID = "blockId"
         private const val ARG_COURSE_ID = "courseId"
+        private const val ARG_IS_PLAYING = "isPlaying"
 
         fun newInstance(
             videoUrl: String,
             videoTime: Long,
             blockId: String,
-            courseId: String
+            courseId: String,
+            isPlaying: Boolean
         ): VideoFullScreenFragment {
             val fragment = VideoFullScreenFragment()
             fragment.arguments = bundleOf(
                 ARG_BLOCK_VIDEO_URL to videoUrl,
                 ARG_VIDEO_TIME to videoTime,
                 ARG_BLOCK_ID to blockId,
-                ARG_COURSE_ID to courseId
+                ARG_COURSE_ID to courseId,
+                ARG_IS_PLAYING to isPlaying
             )
             return fragment
         }
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitFragment.kt
index 49e27c79f..4d231471c 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitFragment.kt
@@ -1,9 +1,9 @@
 package org.openedx.course.presentation.unit.video
 
+import android.content.res.Configuration
 import android.os.Bundle
 import android.os.Handler
 import android.os.Looper
-import android.view.OrientationEventListener
 import android.view.View
 import android.widget.FrameLayout
 import androidx.compose.foundation.background
@@ -17,9 +17,12 @@ import androidx.compose.ui.Modifier
 import androidx.core.os.bundleOf
 import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
+import androidx.media3.cast.SessionAvailabilityListener
 import androidx.media3.common.MediaItem
-import androidx.media3.common.Player
-import androidx.media3.exoplayer.ExoPlayer
+import androidx.media3.common.MediaMetadata
+import androidx.media3.common.util.UnstableApi
+import androidx.media3.datasource.DefaultDataSource
+import androidx.media3.exoplayer.hls.HlsMediaSource
 import androidx.window.layout.WindowMetricsCalculator
 import org.koin.android.ext.android.inject
 import org.koin.androidx.viewmodel.ext.android.viewModel
@@ -28,8 +31,10 @@ import org.openedx.core.extension.computeWindowSizeClasses
 import org.openedx.core.extension.dpToPixel
 import org.openedx.core.extension.objectToString
 import org.openedx.core.extension.stringToObject
-import org.openedx.core.presentation.dialog.SelectBottomDialogFragment
+import org.openedx.core.presentation.dialog.appreview.AppReviewManager
+import org.openedx.core.presentation.dialog.selectorbottomsheet.SelectBottomDialogFragment
 import org.openedx.core.presentation.global.viewBinding
+import org.openedx.core.ui.ConnectionErrorView
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
@@ -37,8 +42,6 @@ import org.openedx.core.utils.LocaleUtils
 import org.openedx.course.R
 import org.openedx.course.databinding.FragmentVideoUnitBinding
 import org.openedx.course.presentation.CourseRouter
-import org.openedx.course.presentation.ui.ConnectionErrorView
-import org.openedx.course.presentation.ui.VideoRotateView
 import org.openedx.course.presentation.ui.VideoSubtitles
 import org.openedx.course.presentation.ui.VideoTitle
 import kotlin.math.roundToInt
@@ -46,42 +49,33 @@ import kotlin.math.roundToInt
 class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
 
     private val binding by viewBinding(FragmentVideoUnitBinding::bind)
-    private val viewModel by viewModel<VideoUnitViewModel> {
-        parametersOf(requireArguments().getString(ARG_COURSE_ID, ""))
+    private val viewModel by viewModel<EncodedVideoUnitViewModel> {
+        parametersOf(
+            requireArguments().getString(ARG_COURSE_ID, ""),
+            requireArguments().getString(ARG_BLOCK_ID, ""),
+        )
     }
     private val router by inject<CourseRouter>()
+    private val appReviewManager by inject<AppReviewManager> { parametersOf(requireActivity()) }
 
-    private var exoPlayer: ExoPlayer? = null
     private var windowSize: WindowSize? = null
 
-    private var orientationListener: OrientationEventListener? = null
-    private var blockId = ""
-
     private val handler = Handler(Looper.getMainLooper())
     private var videoTimeRunnable: Runnable = object : Runnable {
         override fun run() {
-            exoPlayer?.let {
+            viewModel.getActivePlayer()?.let {
                 if (it.isPlaying) {
                     viewModel.setCurrentVideoTime(it.currentPosition)
                 }
                 val completePercentage = it.currentPosition.toDouble() / it.duration.toDouble()
                 if (completePercentage >= 0.8f) {
-                    viewModel.markBlockCompleted(blockId)
+                    viewModel.markBlockCompleted(viewModel.blockId)
                 }
             }
             handler.postDelayed(this, 200)
         }
     }
 
-    private val exoPlayerListener = object : Player.Listener {
-        override fun onPlaybackStateChanged(playbackState: Int) {
-            super.onPlaybackStateChanged(playbackState)
-            if (playbackState == Player.STATE_ENDED) {
-                viewModel.markBlockCompleted(blockId)
-            }
-        }
-    }
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         windowSize = computeWindowSizeClasses()
@@ -89,46 +83,18 @@ class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
         handler.post(videoTimeRunnable)
         requireArguments().apply {
             viewModel.videoUrl = getString(ARG_VIDEO_URL, "")
-            viewModel.transcripts =
-                stringToObject<Map<String, String>>(
-                    getString(ARG_TRANSCRIPT_URL, "")
-                ) ?: emptyMap()
+            viewModel.transcripts = stringToObject<Map<String, String>>(
+                getString(ARG_TRANSCRIPT_URL, "")
+            ) ?: emptyMap()
             viewModel.isDownloaded = getBoolean(ARG_DOWNLOADED)
-            blockId = getString(ARG_BLOCK_ID, "")
         }
         viewModel.downloadSubtitles()
-        orientationListener = object : OrientationEventListener(requireActivity()) {
-            override fun onOrientationChanged(orientation: Int) {
-                if (windowSize?.isTablet != true) {
-                    if (orientation in 75..300) {
-                        if (!viewModel.fullscreenHandled) {
-                            router.navigateToFullScreenVideo(
-                                requireActivity().supportFragmentManager,
-                                viewModel.videoUrl,
-                                exoPlayer?.currentPosition ?: viewModel.getCurrentVideoTime(),
-                                blockId,
-                                viewModel.courseId
-                            )
-                            viewModel.fullscreenHandled = true
-                        }
-                    } else {
-                        viewModel.fullscreenHandled = false
-                    }
-                }
-            }
-        }
     }
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
-        binding.cvRotateHelper.setContent {
-            OpenEdXTheme {
-                VideoRotateView()
-            }
-        }
-
-        binding.cvVideoTitle.setContent {
+        binding.cvVideoTitle?.setContent {
             OpenEdXTheme {
                 VideoTitle(text = requireArguments().getString(ARG_TITLE) ?: "")
             }
@@ -158,8 +124,14 @@ class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
                     subtitleLanguage = LocaleUtils.getDisplayLanguage(viewModel.transcriptLanguage),
                     showSubtitleLanguage = viewModel.transcripts.size > 1,
                     currentIndex = currentIndex,
+                    onTranscriptClick = {
+                        viewModel.getActivePlayer()?.apply {
+                            seekTo(it.start.mseconds.toLong())
+                            play()
+                        }
+                    },
                     onSettingsClick = {
-                        exoPlayer?.pause()
+                        viewModel.getActivePlayer()?.pause()
                         val dialog = SelectBottomDialogFragment.newInstance(
                             LocaleUtils.getLanguages(viewModel.transcripts.keys.toList())
                         )
@@ -172,21 +144,27 @@ class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
             }
         }
 
-        binding.connectionError.isVisible = !viewModel.hasInternetConnection && !viewModel.isDownloaded
+        binding.connectionError.isVisible =
+            !viewModel.hasInternetConnection && !viewModel.isDownloaded
 
-        val windowMetrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(requireActivity())
+        val orientation = resources.configuration.orientation
+        val windowMetrics =
+            WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(requireActivity())
         val currentBounds = windowMetrics.bounds
-        val width = currentBounds.width() - requireContext().dpToPixel(32)
-        val minHeight = requireContext().dpToPixel(194).roundToInt()
-        val height = (width / 16f * 9f).roundToInt()
         val layoutParams = binding.playerView.layoutParams as FrameLayout.LayoutParams
-        layoutParams.height = if (windowSize?.isTablet == true) {
-            requireContext().dpToPixel(320).roundToInt()
-        } else if (height < minHeight) {
-            minHeight
-        } else {
-            height
+        if (orientation == Configuration.ORIENTATION_PORTRAIT || windowSize?.isTablet == true) {
+            val width = currentBounds.width() - requireContext().dpToPixel(32)
+            val minHeight = requireContext().dpToPixel(194).roundToInt()
+            val height = (width / 16f * 9f).roundToInt()
+            layoutParams.height = if (windowSize?.isTablet == true) {
+                requireContext().dpToPixel(320).roundToInt()
+            } else if (height < minHeight) {
+                minHeight
+            } else {
+                height
+            }
         }
+
         binding.playerView.layoutParams = layoutParams
 
         viewModel.isUpdated.observe(viewLifecycleOwner) { isUpdated ->
@@ -195,66 +173,111 @@ class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
             }
         }
 
-        viewModel.isPopUpViewShow.observe(viewLifecycleOwner) {
-            if (windowSize?.isTablet != true) {
-                binding.cvRotateHelper.isVisible = it
+        viewModel.isVideoEnded.observe(viewLifecycleOwner) { isVideoEnded ->
+            if (isVideoEnded && !appReviewManager.isDialogShowed) {
+                appReviewManager.tryToOpenRateDialog()
             }
         }
     }
 
-    @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
-    private fun  initPlayer() {
+    @androidx.annotation.OptIn(UnstableApi::class)
+    private fun initPlayer() {
         with(binding) {
-            if (exoPlayer == null) {
-                exoPlayer = ExoPlayer.Builder(requireContext())
-                    .build()
-            }
-            playerView.player = exoPlayer
+            playerView.player = viewModel.getActivePlayer()
             playerView.setShowNextButton(false)
             playerView.setShowPreviousButton(false)
-            playerView.controllerAutoShow = true
-            playerView.controllerShowTimeoutMs = 2000
-            val mediaItem = MediaItem.fromUri(viewModel.videoUrl)
-            exoPlayer?.setMediaItem(mediaItem, viewModel.getCurrentVideoTime())
-            exoPlayer?.prepare()
+            showVideoControllerIndefinitely(false)
+
+            val movieMetadata = MediaMetadata.Builder()
+                .setMediaType(MediaMetadata.MEDIA_TYPE_MOVIE)
+                .build()
+            val mediaItem = MediaItem.Builder().setMediaMetadata(movieMetadata)
+                .setUri(viewModel.videoUrl)
+                .setMimeType("video/*")
+                .build()
+
+            if (!viewModel.isPlayerSetUp) {
+                setPlayerMedia(mediaItem)
+                viewModel.getActivePlayer()?.prepare()
+                viewModel.getActivePlayer()?.playWhenReady = viewModel.isPlaying
+                viewModel.isPlayerSetUp = true
+            }
+
+            viewModel.castPlayer?.setSessionAvailabilityListener(
+                object : SessionAvailabilityListener {
+                    override fun onCastSessionAvailable() {
+                        viewModel.isCastActive = true
+                        viewModel.exoPlayer?.pause()
+                        playerView.player = viewModel.castPlayer
+                        viewModel.castPlayer?.setMediaItem(
+                            mediaItem,
+                            viewModel.exoPlayer?.currentPosition ?: 0L
+                        )
+                        viewModel.castPlayer?.playWhenReady = false
+                        showVideoControllerIndefinitely(true)
+                    }
+
+                    override fun onCastSessionUnavailable() {
+                        viewModel.isCastActive = false
+                        playerView.player = viewModel.exoPlayer
+                        viewModel.exoPlayer?.seekTo(viewModel.castPlayer?.currentPosition ?: 0L)
+                        viewModel.castPlayer?.stop()
+                        viewModel.exoPlayer?.play()
+                        showVideoControllerIndefinitely(false)
+                    }
+                }
+            )
+
+            playerView.setFullscreenButtonClickListener {
+                if (viewModel.isCastActive)
+                    return@setFullscreenButtonClickListener
 
-            playerView.setFullscreenButtonClickListener { isFullScreen ->
                 router.navigateToFullScreenVideo(
                     requireActivity().supportFragmentManager,
                     viewModel.videoUrl,
-                    exoPlayer?.currentPosition ?: 0L,
-                    blockId,
-                    viewModel.courseId
+                    viewModel.exoPlayer?.currentPosition ?: 0L,
+                    viewModel.blockId,
+                    viewModel.courseId,
+                    viewModel.isPlaying
                 )
-                viewModel.fullscreenHandled = true
             }
         }
     }
 
-    override fun onResume() {
-        super.onResume()
-        if (orientationListener?.canDetectOrientation() == true) {
-            orientationListener?.enable()
+    @UnstableApi
+    override fun onDestroy() {
+        if (!requireActivity().isChangingConfigurations) {
+            viewModel.releasePlayers()
+            viewModel.isPlayerSetUp = false
         }
-        exoPlayer?.addListener(exoPlayerListener)
-    }
-
-    override fun onPause() {
-        super.onPause()
-        exoPlayer?.removeListener(exoPlayerListener)
-        exoPlayer?.pause()
-        orientationListener?.disable()
+        handler.removeCallbacks(videoTimeRunnable)
+        super.onDestroy()
     }
 
-    override fun onDestroyView() {
-        exoPlayer?.release()
-        exoPlayer = null
-        super.onDestroyView()
+    @UnstableApi
+    private fun showVideoControllerIndefinitely(show: Boolean) {
+        if (show) {
+            binding.playerView.controllerAutoShow = false
+            binding.playerView.controllerShowTimeoutMs = 0
+            binding.playerView.showController()
+        } else {
+            binding.playerView.controllerAutoShow = true
+            binding.playerView.controllerShowTimeoutMs = 2000
+        }
     }
 
-    override fun onDestroy() {
-        handler.removeCallbacks(videoTimeRunnable)
-        super.onDestroy()
+    @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
+    private fun setPlayerMedia(mediaItem: MediaItem) {
+        if (viewModel.videoUrl.endsWith(".m3u8")) {
+            val factory = DefaultDataSource.Factory(requireContext())
+            val mediaSource: HlsMediaSource = HlsMediaSource.Factory(factory).createMediaSource(mediaItem)
+            viewModel.exoPlayer?.setMediaSource(mediaSource, viewModel.getCurrentVideoTime())
+        } else {
+            viewModel.getActivePlayer()?.setMediaItem(
+                mediaItem,
+                viewModel.getCurrentVideoTime()
+            )
+        }
     }
 
     companion object {
@@ -264,13 +287,14 @@ class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
         private const val ARG_COURSE_ID = "courseId"
         private const val ARG_TITLE = "title"
         private const val ARG_DOWNLOADED = "isDownloaded"
+
         fun newInstance(
             blockId: String,
             courseId: String,
             videoUrl: String,
             transcriptsUrl: Map<String, String>,
             title: String,
-            isDownloaded: Boolean
+            isDownloaded: Boolean,
         ): VideoUnitFragment {
             val fragment = VideoUnitFragment()
             fragment.arguments = bundleOf(
@@ -284,4 +308,4 @@ class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
             return fragment
         }
     }
-}
\ No newline at end of file
+}
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitViewModel.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitViewModel.kt
index 1f9f47f1f..1005521a0 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitViewModel.kt
@@ -4,21 +4,22 @@ import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
 import org.openedx.core.AppDataConstants
 import org.openedx.core.BaseViewModel
 import org.openedx.core.module.TranscriptManager
 import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.CourseCompletionSet
 import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.core.system.notifier.CourseSubtitleLanguageChanged
 import org.openedx.core.system.notifier.CourseVideoPositionChanged
 import org.openedx.course.data.repository.CourseRepository
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.asStateFlow
-import kotlinx.coroutines.launch
 import subtitleFile.TimedTextObject
 
-class VideoUnitViewModel(
+open class VideoUnitViewModel(
     val courseId: String,
     private val courseRepository: CourseRepository,
     private val notifier: CourseNotifier,
@@ -28,11 +29,10 @@ class VideoUnitViewModel(
 
     var videoUrl = ""
     var transcripts = emptyMap<String, String>()
+    var isPlaying = false
     var transcriptLanguage = AppDataConstants.defaultLocale.language ?: "en"
         private set
 
-    var fullscreenHandled = false
-
     var isDownloaded = false
 
     private val _currentVideoTime = MutableLiveData<Long>(0)
@@ -43,10 +43,6 @@ class VideoUnitViewModel(
     val isUpdated: LiveData<Boolean>
         get() = _isUpdated
 
-    private val _isPopUpViewShow = MutableLiveData(true)
-    val isPopUpViewShow: LiveData<Boolean>
-        get() = _isPopUpViewShow
-
     private val _currentIndex = MutableStateFlow(0)
     val currentIndex = _currentIndex.asStateFlow()
 
@@ -61,13 +57,6 @@ class VideoUnitViewModel(
 
     private var isBlockAlreadyCompleted = false
 
-    init {
-        viewModelScope.launch {
-            delay(4000)
-            _isPopUpViewShow.value = false
-        }
-    }
-
     override fun onCreate(owner: LifecycleOwner) {
         super.onCreate(owner)
         viewModelScope.launch {
@@ -76,6 +65,7 @@ class VideoUnitViewModel(
                     _isUpdated.value = false
                     _currentVideoTime.value = it.videoTime
                     _isUpdated.value = true
+                    isPlaying = it.isPlaying
                 } else if (it is CourseSubtitleLanguageChanged) {
                     transcriptLanguage = it.value
                     _transcriptObject.value = null
@@ -86,9 +76,9 @@ class VideoUnitViewModel(
     }
 
     fun downloadSubtitles() {
-        viewModelScope.launch {
+        viewModelScope.launch(Dispatchers.IO) {
             transcriptManager.downloadTranscriptsForVideo(getTranscriptUrl())?.let { result ->
-                _transcriptObject.value = result
+                _transcriptObject.postValue(result)
                 timeList = result.captions.values.toList()
                     .map { it.start.mseconds.toLong() }
             }
@@ -117,6 +107,7 @@ class VideoUnitViewModel(
                         courseId,
                         listOf(blockId)
                     )
+                    notifier.send(CourseCompletionSet())
                 } catch (e: Exception) {
                     isBlockAlreadyCompleted = false
                 }
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoViewModel.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoViewModel.kt
index 720013a70..6e127aeb4 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoViewModel.kt
@@ -7,15 +7,19 @@ import org.openedx.course.data.repository.CourseRepository
 import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.core.system.notifier.CourseVideoPositionChanged
 import kotlinx.coroutines.launch
+import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.system.notifier.CourseCompletionSet
 
 class VideoViewModel(
     private val courseId: String,
     private val courseRepository: CourseRepository,
-    private val notifier: CourseNotifier
+    private val notifier: CourseNotifier,
+    private val preferencesManager: CorePreferences
 ) : BaseViewModel() {
 
     var videoUrl = ""
     var currentVideoTime = 0L
+    var isPlaying: Boolean? = null
 
     private var isBlockAlreadyCompleted = false
 
@@ -23,7 +27,7 @@ class VideoViewModel(
     fun sendTime() {
         if (currentVideoTime != C.TIME_UNSET) {
             viewModelScope.launch {
-                notifier.send(CourseVideoPositionChanged(videoUrl, currentVideoTime))
+                notifier.send(CourseVideoPositionChanged(videoUrl, currentVideoTime, isPlaying ?: false))
             }
         }
     }
@@ -37,6 +41,7 @@ class VideoViewModel(
                         courseId,
                         listOf(blockId)
                     )
+                    notifier.send(CourseCompletionSet())
                 } catch (e: Exception) {
                     isBlockAlreadyCompleted = false
                 }
@@ -44,4 +49,5 @@ class VideoViewModel(
         }
     }
 
+    fun getVideoQuality() = preferencesManager.videoSettings.videoQuality
 }
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoFullScreenFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoFullScreenFragment.kt
index 8ab9468ce..0d6ce6d84 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoFullScreenFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoFullScreenFragment.kt
@@ -1,7 +1,5 @@
 package org.openedx.course.presentation.unit.video
 
-import android.annotation.SuppressLint
-import android.content.pm.ActivityInfo
 import android.os.Bundle
 import android.view.View
 import android.widget.FrameLayout
@@ -15,29 +13,27 @@ import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.listeners.Abs
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.options.IFramePlayerOptions
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.utils.YouTubePlayerTracker
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.ui.DefaultPlayerUiController
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.extension.requestApplyInsetsWhenAttached
-import org.openedx.core.presentation.global.WindowSizeHolder
+import org.openedx.core.presentation.dialog.appreview.AppReviewManager
 import org.openedx.core.presentation.global.viewBinding
-import org.openedx.core.ui.WindowType
 import org.openedx.course.R
 import org.openedx.course.databinding.FragmentYoutubeVideoFullScreenBinding
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
 
 class YoutubeVideoFullScreenFragment : Fragment(R.layout.fragment_youtube_video_full_screen) {
 
     private val binding by viewBinding(FragmentYoutubeVideoFullScreenBinding::bind)
-
     private val viewModel by viewModel<VideoViewModel> {
         parametersOf(requireArguments().getString(ARG_COURSE_ID, ""))
     }
+    private val appReviewManager by inject<AppReviewManager> { parametersOf(requireActivity()) }
 
     private var blockId = ""
-    private var isTabletDevice = false
 
     private val youtubeTrackerListener = YouTubePlayerTracker()
 
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         viewModel.videoUrl = requireArguments().getString(ARG_BLOCK_VIDEO_URL, "")
@@ -45,15 +41,8 @@ class YoutubeVideoFullScreenFragment : Fragment(R.layout.fragment_youtube_video_
         if (viewModel.currentVideoTime == 0L) {
             viewModel.currentVideoTime = requireArguments().getLong(ARG_VIDEO_TIME, 0)
         }
-        setOrientationBasedOnDeviceType()
-    }
-
-    private fun setOrientationBasedOnDeviceType() {
-        val windowSize = requireActivity() as WindowSizeHolder
-        isTabletDevice = windowSize.windowSize.width != WindowType.Compact &&
-                windowSize.windowSize.height != WindowType.Compact
-        if (!isTabletDevice) {
-            requireActivity().requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR
+        if (viewModel.isPlaying == null) {
+            viewModel.isPlaying = requireArguments().getBoolean(ARG_IS_PLAYING)
         }
     }
 
@@ -80,8 +69,9 @@ class YoutubeVideoFullScreenFragment : Fragment(R.layout.fragment_youtube_video_
             .build()
 
 
-        binding.youtubePlayerView.initialize(object :
-            AbstractYouTubePlayerListener() {
+        binding.youtubePlayerView.initialize(object : AbstractYouTubePlayerListener() {
+            var isMarkBlockCompletedCalled = false
+
             override fun onStateChange(
                 youTubePlayer: YouTubePlayer,
                 state: PlayerConstants.PlayerState
@@ -90,22 +80,32 @@ class YoutubeVideoFullScreenFragment : Fragment(R.layout.fragment_youtube_video_
                 if (state == PlayerConstants.PlayerState.ENDED) {
                     viewModel.markBlockCompleted(blockId)
                 }
+                viewModel.isPlaying = when(state) {
+                    PlayerConstants.PlayerState.PLAYING -> true
+                    PlayerConstants.PlayerState.PAUSED -> false
+                    else -> return
+                }
             }
 
             override fun onCurrentSecond(youTubePlayer: YouTubePlayer, second: Float) {
                 super.onCurrentSecond(youTubePlayer, second)
                 viewModel.currentVideoTime = (second * 1000f).toLong()
                 val completePercentage = second / youtubeTrackerListener.videoDuration
-                if (completePercentage >= 0.8f) {
+                if (completePercentage >= 0.8f && !isMarkBlockCompletedCalled) {
                     viewModel.markBlockCompleted(blockId)
+                    isMarkBlockCompletedCalled = true
+                }
+                if (completePercentage >= 0.99f && !appReviewManager.isDialogShowed) {
+                    if (!appReviewManager.isDialogShowed) {
+                        appReviewManager.tryToOpenRateDialog()
+                    }
                 }
             }
 
             override fun onReady(youTubePlayer: YouTubePlayer) {
                 super.onReady(youTubePlayer)
                 binding.youtubePlayerView.isVisible = true
-                val defPlayerUiController =
-                    DefaultPlayerUiController(binding.youtubePlayerView, youTubePlayer)
+                val defPlayerUiController = DefaultPlayerUiController(binding.youtubePlayerView, youTubePlayer)
                 defPlayerUiController.setFullScreenButtonClickListener {
                     parentFragmentManager.popBackStack()
                 }
@@ -113,7 +113,11 @@ class YoutubeVideoFullScreenFragment : Fragment(R.layout.fragment_youtube_video_
                 binding.youtubePlayerView.setCustomPlayerUi(defPlayerUiController.rootView)
 
                 val videoId = viewModel.videoUrl.split("watch?v=")[1]
-                youTubePlayer.loadVideo(videoId, viewModel.currentVideoTime.toFloat() / 1000)
+                if (viewModel.isPlaying == true) {
+                    youTubePlayer.loadVideo(videoId, viewModel.currentVideoTime.toFloat() / 1000)
+                } else {
+                    youTubePlayer.cueVideo(videoId, viewModel.currentVideoTime.toFloat() / 1000)
+                }
                 youTubePlayer.addListener(youtubeTrackerListener)
 
             }
@@ -126,33 +130,27 @@ class YoutubeVideoFullScreenFragment : Fragment(R.layout.fragment_youtube_video_
         super.onDestroyView()
     }
 
-    @SuppressLint("SourceLockedOrientationActivity")
-    override fun onDestroy() {
-        if (!isTabletDevice) {
-            requireActivity().requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
-        }
-        super.onDestroy()
-    }
-
     companion object {
         private const val ARG_BLOCK_VIDEO_URL = "blockVideoUrl"
         private const val ARG_VIDEO_TIME = "videoTime"
         private const val ARG_BLOCK_ID = "blockID"
         private const val ARG_COURSE_ID = "courseId"
+        private const val ARG_IS_PLAYING = "isPlaying"
 
         fun newInstance(
             videoUrl: String,
             videoTime: Long,
             blockId: String,
             courseId: String,
+            isPlaying: Boolean
         ): YoutubeVideoFullScreenFragment {
             val fragment = YoutubeVideoFullScreenFragment()
             fragment.arguments = bundleOf(
                 ARG_BLOCK_VIDEO_URL to videoUrl,
                 ARG_VIDEO_TIME to videoTime,
                 ARG_BLOCK_ID to blockId,
-                ARG_COURSE_ID to courseId
-
+                ARG_COURSE_ID to courseId,
+                ARG_IS_PLAYING to isPlaying
             )
             return fragment
         }
diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoUnitFragment.kt
index 67cc8e7a2..bdf47e990 100644
--- a/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoUnitFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoUnitFragment.kt
@@ -2,7 +2,6 @@ package org.openedx.course.presentation.unit.video
 
 import android.os.Bundle
 import android.view.LayoutInflater
-import android.view.OrientationEventListener
 import android.view.View
 import android.view.ViewGroup
 import androidx.compose.foundation.background
@@ -16,15 +15,21 @@ import androidx.compose.ui.Modifier
 import androidx.core.os.bundleOf
 import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
+import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.PlayerConstants
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.YouTubePlayer
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.listeners.AbstractYouTubePlayerListener
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.options.IFramePlayerOptions
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.player.utils.YouTubePlayerTracker
 import com.pierfrancescosoffritti.androidyoutubeplayer.core.ui.DefaultPlayerUiController
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.extension.computeWindowSizeClasses
 import org.openedx.core.extension.objectToString
 import org.openedx.core.extension.stringToObject
-import org.openedx.core.presentation.dialog.SelectBottomDialogFragment
+import org.openedx.core.presentation.dialog.appreview.AppReviewManager
+import org.openedx.core.presentation.dialog.selectorbottomsheet.SelectBottomDialogFragment
+import org.openedx.core.ui.ConnectionErrorView
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
@@ -32,13 +37,8 @@ import org.openedx.core.utils.LocaleUtils
 import org.openedx.course.R
 import org.openedx.course.databinding.FragmentYoutubeVideoUnitBinding
 import org.openedx.course.presentation.CourseRouter
-import org.openedx.course.presentation.ui.ConnectionErrorView
-import org.openedx.course.presentation.ui.VideoRotateView
 import org.openedx.course.presentation.ui.VideoSubtitles
 import org.openedx.course.presentation.ui.VideoTitle
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
 
 class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit) {
 
@@ -46,11 +46,12 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
         parametersOf(requireArguments().getString(ARG_COURSE_ID, ""))
     }
     private val router by inject<CourseRouter>()
+    private val appReviewManager by inject<AppReviewManager> { parametersOf(requireActivity()) }
+
     private var _binding: FragmentYoutubeVideoUnitBinding? = null
     private val binding get() = _binding!!
 
     private var windowSize: WindowSize? = null
-    private var orientationListener: OrientationEventListener? = null
     private var _youTubePlayer: YouTubePlayer? = null
 
     private var blockId = ""
@@ -71,26 +72,6 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
             blockId = getString(ARG_BLOCK_ID, "")
         }
         viewModel.downloadSubtitles()
-        orientationListener = object : OrientationEventListener(requireActivity()) {
-            override fun onOrientationChanged(orientation: Int) {
-                if (windowSize?.isTablet != true) {
-                    if (orientation in 75..300) {
-                        if (!viewModel.fullscreenHandled) {
-                            router.navigateToFullScreenYoutubeVideo(
-                                requireActivity().supportFragmentManager,
-                                viewModel.videoUrl,
-                                viewModel.getCurrentVideoTime(),
-                                blockId,
-                                viewModel.courseId
-                            )
-                            viewModel.fullscreenHandled = true
-                        }
-                    } else {
-                        viewModel.fullscreenHandled = false
-                    }
-                }
-            }
-        }
     }
 
     override fun onCreateView(
@@ -105,13 +86,7 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
-        binding.cvRotateHelper.setContent {
-            OpenEdXTheme {
-                VideoRotateView()
-            }
-        }
-
-        binding.cvVideoTitle.setContent {
+        binding.cvVideoTitle?.setContent {
             OpenEdXTheme {
                 VideoTitle(text = requireArguments().getString(ARG_TITLE) ?: "")
             }
@@ -140,6 +115,12 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
                     subtitleLanguage = LocaleUtils.getDisplayLanguage(viewModel.transcriptLanguage),
                     showSubtitleLanguage = viewModel.transcripts.size > 1,
                     currentIndex = currentIndex,
+                    onTranscriptClick = {
+                        _youTubePlayer?.apply {
+                            seekTo(it.start.mseconds / 1000f)
+                            play()
+                        }
+                    },
                     onSettingsClick = {
                         _youTubePlayer?.pause()
                         val dialog =
@@ -165,12 +146,27 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
             .build()
 
         val listener = object : AbstractYouTubePlayerListener() {
+            var isMarkBlockCompletedCalled = false
+
             override fun onCurrentSecond(youTubePlayer: YouTubePlayer, second: Float) {
                 super.onCurrentSecond(youTubePlayer, second)
                 viewModel.setCurrentVideoTime((second * 1000f).toLong())
                 val completePercentage = second / youtubeTrackerListener.videoDuration
-                if (completePercentage >= 0.8f) {
+                if (completePercentage >= 0.8f && !isMarkBlockCompletedCalled) {
                     viewModel.markBlockCompleted(blockId)
+                    isMarkBlockCompletedCalled = true
+                }
+                if (completePercentage >= 0.99f && !appReviewManager.isDialogShowed) {
+                    appReviewManager.tryToOpenRateDialog()
+                }
+            }
+
+            override fun onStateChange(youTubePlayer: YouTubePlayer, state: PlayerConstants.PlayerState) {
+                super.onStateChange(youTubePlayer, state)
+                viewModel.isPlaying = when (state) {
+                    PlayerConstants.PlayerState.PLAYING -> true
+                    PlayerConstants.PlayerState.PAUSED -> false
+                    else -> return
                 }
             }
 
@@ -183,20 +179,24 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
                         youTubePlayer
                     )
                     defPlayerUiController.setFullScreenButtonClickListener {
-                        viewModel.fullscreenHandled = true
                         router.navigateToFullScreenYoutubeVideo(
                             requireActivity().supportFragmentManager,
                             viewModel.videoUrl,
                             viewModel.getCurrentVideoTime(),
                             blockId,
-                            viewModel.courseId
+                            viewModel.courseId,
+                            viewModel.isPlaying
                         )
                     }
                     binding.youtubePlayerView.setCustomPlayerUi(defPlayerUiController.rootView)
                 }
 
                 val videoId = viewModel.videoUrl.split("watch?v=")[1]
-                youTubePlayer.cueVideo(videoId, viewModel.getCurrentVideoTime().toFloat() / 1000)
+                if (viewModel.isPlaying) {
+                    youTubePlayer.loadVideo(videoId, viewModel.getCurrentVideoTime().toFloat() / 1000)
+                } else {
+                    youTubePlayer.cueVideo(videoId, viewModel.getCurrentVideoTime().toFloat() / 1000)
+                }
                 youTubePlayer.addListener(youtubeTrackerListener)
             }
         }
@@ -205,25 +205,11 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
             binding.youtubePlayerView.initialize(listener, options)
             isPlayerInitialized = true
         }
-
-        viewModel.isPopUpViewShow.observe(viewLifecycleOwner) {
-            if (windowSize?.isTablet != true) {
-                binding.cvRotateHelper.isVisible = it
-            }
-        }
-    }
-
-    override fun onResume() {
-        super.onResume()
-        if (orientationListener?.canDetectOrientation() == true) {
-            orientationListener?.enable()
-        }
     }
 
     override fun onPause() {
         super.onPause()
         _youTubePlayer?.pause()
-        orientationListener?.disable()
     }
 
     override fun onDestroyView() {
diff --git a/course/src/main/java/org/openedx/course/presentation/videos/CourseVideoViewModel.kt b/course/src/main/java/org/openedx/course/presentation/videos/CourseVideoViewModel.kt
index 6522a9b32..196bd28d2 100644
--- a/course/src/main/java/org/openedx/course/presentation/videos/CourseVideoViewModel.kt
+++ b/course/src/main/java/org/openedx/course/presentation/videos/CourseVideoViewModel.kt
@@ -4,9 +4,11 @@ import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
 import org.openedx.core.BlockType
 import org.openedx.core.SingleEventLiveData
 import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.Block
 import org.openedx.core.module.DownloadWorkerController
@@ -18,19 +20,27 @@ import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.core.system.notifier.CourseStructureUpdated
 import org.openedx.course.R
 import org.openedx.course.domain.interactor.CourseInteractor
-import kotlinx.coroutines.launch
+import org.openedx.course.presentation.CourseAnalytics
 
 class CourseVideoViewModel(
     val courseId: String,
+    private val config: Config,
     private val interactor: CourseInteractor,
     private val resourceManager: ResourceManager,
     private val networkConnection: NetworkConnection,
     private val preferencesManager: CorePreferences,
     private val notifier: CourseNotifier,
+    private val analytics: CourseAnalytics,
     downloadDao: DownloadDao,
     workerController: DownloadWorkerController
 ) : BaseDownloadViewModel(downloadDao, preferencesManager, workerController) {
 
+    val apiHostUrl get() = config.getApiHostURL()
+
+    val isCourseNestedListEnabled get() = config.isCourseNestedListEnabled()
+
+    val isCourseBannerEnabled get() = config.isCourseBannerEnabled()
+
     private val _uiState = MutableLiveData<CourseVideosUIState>()
     val uiState: LiveData<CourseVideosUIState>
         get() = _uiState
@@ -48,6 +58,10 @@ class CourseVideoViewModel(
     val hasInternetConnection: Boolean
         get() = networkConnection.isOnline()
 
+    private val courseSubSections = mutableMapOf<String, MutableList<Block>>()
+    private val subSectionsDownloadsCount = mutableMapOf<String, Int>()
+    val courseSubSectionUnit = mutableMapOf<String, Block?>()
+
     override fun onCreate(owner: LifecycleOwner) {
         super.onCreate(owner)
         viewModelScope.launch {
@@ -66,7 +80,10 @@ class CourseVideoViewModel(
                     val state = _uiState.value as CourseVideosUIState.CourseData
                     _uiState.value = CourseVideosUIState.CourseData(
                         courseStructure = state.courseStructure,
-                        downloadedState = it.toMap()
+                        downloadedState = it.toMap(),
+                        courseSubSections = courseSubSections,
+                        courseSectionsState = state.courseSectionsState,
+                        subSectionsDownloadsCount = subSectionsDownloadsCount
                     )
                 }
             }
@@ -109,14 +126,46 @@ class CourseVideoViewModel(
                 )
             } else {
                 setBlocks(courseStructure.blockData)
+                courseSubSections.clear()
+                courseSubSectionUnit.clear()
                 courseStructure = courseStructure.copy(blockData = sortBlocks(blocks))
                 initDownloadModelsStatus()
+
+                val courseSectionsState =
+                    (_uiState.value as? CourseVideosUIState.CourseData)?.courseSectionsState.orEmpty()
+
                 _uiState.value =
-                    CourseVideosUIState.CourseData(courseStructure, getDownloadModelsStatus())
+                    CourseVideosUIState.CourseData(
+                        courseStructure, getDownloadModelsStatus(), courseSubSections,
+                        courseSectionsState, subSectionsDownloadsCount
+                    )
             }
         }
     }
 
+    fun switchCourseSections(blockId: String) {
+        if (_uiState.value is CourseVideosUIState.CourseData) {
+            val state = _uiState.value as CourseVideosUIState.CourseData
+            val courseSectionsState = state.courseSectionsState.toMutableMap()
+            courseSectionsState[blockId] = !(state.courseSectionsState[blockId] ?: false)
+
+            _uiState.value = CourseVideosUIState.CourseData(
+                courseStructure = state.courseStructure,
+                downloadedState = state.downloadedState,
+                courseSubSections = courseSubSections,
+                courseSectionsState = courseSectionsState,
+                subSectionsDownloadsCount = subSectionsDownloadsCount
+            )
+        }
+    }
+
+    fun sequentialClickedEvent(blockId: String, blockName: String) {
+        val currentState = uiState.value
+        if (currentState is CourseVideosUIState.CourseData) {
+            analytics.sequentialClickedEvent(courseId, courseTitle, blockId, blockName)
+        }
+    }
+
     private fun sortBlocks(blocks: List<Block>): List<Block> {
         val resultBlocks = mutableListOf<Block>()
         if (blocks.isEmpty()) return emptyList()
@@ -125,7 +174,15 @@ class CourseVideoViewModel(
                 resultBlocks.add(block)
                 block.descendants.forEach { descendant ->
                     blocks.find { it.id == descendant }?.let {
-                        resultBlocks.add(it)
+                        if (isCourseNestedListEnabled) {
+                            courseSubSections.getOrPut(block.id) { mutableListOf() }
+                                .add(it)
+                            courseSubSectionUnit[it.id] = it.getFirstDescendantBlock(blocks)
+                            subSectionsDownloadsCount[it.id] = it.getDownloadsCount(blocks)
+
+                        } else {
+                            resultBlocks.add(it)
+                        }
                         addDownloadableChildrenForSequentialBlock(it)
                     }
                 }
@@ -133,6 +190,4 @@ class CourseVideoViewModel(
         }
         return resultBlocks.toList()
     }
-
-
 }
\ No newline at end of file
diff --git a/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosFragment.kt b/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosFragment.kt
index 854ba9cbc..97d7c8747 100644
--- a/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosFragment.kt
+++ b/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosFragment.kt
@@ -4,6 +4,7 @@ import android.content.res.Configuration
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -20,18 +21,22 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.BlockType
 import org.openedx.core.R
 import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.*
+import org.openedx.core.domain.model.Block
+import org.openedx.core.domain.model.BlockCounts
+import org.openedx.core.domain.model.CourseStructure
+import org.openedx.core.domain.model.CoursewareAccess
 import org.openedx.core.presentation.course.CourseViewMode
 import org.openedx.core.ui.*
 import org.openedx.core.ui.theme.OpenEdXTheme
@@ -40,13 +45,12 @@ import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
 import org.openedx.course.presentation.CourseRouter
 import org.openedx.course.presentation.container.CourseContainerFragment
+import org.openedx.course.presentation.ui.CourseExpandableChapterCard
 import org.openedx.course.presentation.ui.CourseImageHeader
 import org.openedx.course.presentation.ui.CourseSectionCard
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
+import org.openedx.course.presentation.ui.CourseSubSectionItem
 import java.io.File
-import java.util.*
+import java.util.Date
 
 class CourseVideosFragment : Fragment() {
 
@@ -81,7 +85,9 @@ class CourseVideosFragment : Fragment() {
                     windowSize = windowSize,
                     uiState = uiState,
                     uiMessage = uiMessage,
-                    courseTitle = viewModel.courseTitle,
+                    apiHostUrl = viewModel.apiHostUrl,
+                    isCourseNestedListEnabled = viewModel.isCourseNestedListEnabled,
+                    isCourseBannerEnabled = viewModel.isCourseBannerEnabled,
                     hasInternetConnection = viewModel.hasInternetConnection,
                     isUpdating = isUpdating,
                     onSwipeRefresh = {
@@ -93,15 +99,25 @@ class CourseVideosFragment : Fragment() {
                     },
                     onItemClick = { block ->
                         router.navigateToCourseSubsections(
-                            requireActivity().supportFragmentManager,
+                            fm = requireActivity().supportFragmentManager,
                             courseId = viewModel.courseId,
-                            blockId = block.id,
-                            title = block.displayName,
+                            subSectionId = block.id,
                             mode = CourseViewMode.VIDEOS
                         )
                     },
-                    onBackClick = {
-                        requireActivity().supportFragmentManager.popBackStack()
+                    onExpandClick = { block ->
+                        viewModel.switchCourseSections(block.id)
+                    },
+                    onSubSectionClick = { subSectionBlock ->
+                        viewModel.courseSubSectionUnit[subSectionBlock.id]?.let { unit ->
+                            viewModel.sequentialClickedEvent(unit.blockId, unit.displayName)
+                            router.navigateToCourseContainer(
+                                fm = requireActivity().supportFragmentManager,
+                                courseId = viewModel.courseId,
+                                unitId = unit.id,
+                                mode = CourseViewMode.VIDEOS
+                            )
+                        }
                     },
                     onDownloadClick = {
                         if (viewModel.isBlockDownloading(it.id)) {
@@ -146,13 +162,16 @@ private fun CourseVideosScreen(
     windowSize: WindowSize,
     uiState: CourseVideosUIState,
     uiMessage: UIMessage?,
+    apiHostUrl: String,
+    isCourseNestedListEnabled: Boolean,
+    isCourseBannerEnabled: Boolean,
     isUpdating: Boolean,
     hasInternetConnection: Boolean,
     onSwipeRefresh: () -> Unit,
-    courseTitle: String,
     onItemClick: (Block) -> Unit,
+    onExpandClick: (Block) -> Unit,
+    onSubSectionClick: (Block) -> Unit,
     onReloadClick: () -> Unit,
-    onBackClick: () -> Unit,
     onDownloadClick: (Block) -> Unit
 ) {
     val scaffoldState = rememberScaffoldState()
@@ -203,129 +222,160 @@ private fun CourseVideosScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(it)
-                .statusBarsInset(),
+                .displayCutoutForLandscape(),
             contentAlignment = Alignment.TopCenter
         ) {
-            Column(screenWidth) {
-                Box(
-                    Modifier
-                        .fillMaxWidth()
-                        .zIndex(1f),
-                    contentAlignment = Alignment.CenterStart
-                ) {
-                    BackBtn {
-                        onBackClick()
-                    }
-                    Text(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(horizontal = 56.dp),
-                        text = courseTitle,
-                        color = MaterialTheme.appColors.textPrimary,
-                        style = MaterialTheme.appTypography.titleMedium,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                        textAlign = TextAlign.Center
-                    )
-                }
-                Spacer(Modifier.height(6.dp))
-                Surface(
-                    color = MaterialTheme.appColors.background,
-                    shape = MaterialTheme.appShapes.screenBackgroundShape
-                ) {
-                    Box(Modifier.pullRefresh(pullRefreshState)) {
-                        Column(
-                            Modifier
-                                .fillMaxSize()
-                        ) {
-                            when (uiState) {
-                                is CourseVideosUIState.Empty -> {
-                                    Box(
-                                        modifier = Modifier.fillMaxSize(),
-                                        contentAlignment = Alignment.Center
-                                    ) {
-                                        Text(
-                                            text = stringResource(id = org.openedx.course.R.string.course_does_not_include_videos),
-                                            color = MaterialTheme.appColors.textPrimary,
-                                            style = MaterialTheme.appTypography.headlineSmall,
-                                            textAlign = TextAlign.Center,
-                                            modifier = Modifier.padding(horizontal = 40.dp)
-                                        )
-                                    }
+            Surface(
+                modifier = screenWidth,
+                color = MaterialTheme.appColors.background,
+                shape = MaterialTheme.appShapes.screenBackgroundShape
+            ) {
+                Box(Modifier.pullRefresh(pullRefreshState)) {
+                    Column(
+                        Modifier
+                            .fillMaxSize()
+                    ) {
+                        when (uiState) {
+                            is CourseVideosUIState.Empty -> {
+                                Box(
+                                    modifier = Modifier.fillMaxSize(),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    Text(
+                                        text = stringResource(id = org.openedx.course.R.string.course_does_not_include_videos),
+                                        color = MaterialTheme.appColors.textPrimary,
+                                        style = MaterialTheme.appTypography.headlineSmall,
+                                        textAlign = TextAlign.Center,
+                                        modifier = Modifier.padding(horizontal = 40.dp)
+                                    )
                                 }
+                            }
 
-                                is CourseVideosUIState.Loading -> {
-                                    Box(
-                                        modifier = Modifier.fillMaxSize(),
-                                        contentAlignment = Alignment.Center
-                                    ) {
-                                        CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-                                    }
+                            is CourseVideosUIState.Loading -> {
+                                Box(
+                                    modifier = Modifier.fillMaxSize(),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    CircularProgressIndicator(color = MaterialTheme.appColors.primary)
                                 }
+                            }
 
-                                is CourseVideosUIState.CourseData -> {
-                                    LazyColumn(
-                                        modifier = Modifier.fillMaxSize(),
-                                        contentPadding = listBottomPadding
-                                    ) {
+                            is CourseVideosUIState.CourseData -> {
+                                LazyColumn(
+                                    modifier = Modifier.fillMaxSize(),
+                                    contentPadding = listBottomPadding
+                                ) {
+                                    if (isCourseBannerEnabled) {
                                         item {
                                             CourseImageHeader(
                                                 modifier = Modifier
                                                     .aspectRatio(1.86f)
                                                     .padding(6.dp),
+                                                apiHostUrl = apiHostUrl,
                                                 courseImage = uiState.courseStructure.media?.image?.large
                                                     ?: "",
-                                                courseCertificate = uiState.courseStructure.certificate
+                                                courseCertificate = uiState.courseStructure.certificate,
+                                                courseName = uiState.courseStructure.name
                                             )
                                         }
-                                        items(uiState.courseStructure.blockData) { block ->
-                                            Column(listPadding) {
-                                                if (block.type == BlockType.CHAPTER) {
-                                                    Text(
-                                                        modifier = Modifier.padding(
-                                                            top = 36.dp,
-                                                            bottom = 8.dp
-                                                        ),
-                                                        text = block.displayName,
-                                                        style = MaterialTheme.appTypography.titleMedium,
-                                                        color = MaterialTheme.appColors.textPrimaryVariant
-                                                    )
-                                                } else {
-                                                    CourseSectionCard(
-                                                        block = block,
-                                                        downloadedState = uiState.downloadedState[block.id],
-                                                        onItemClick = { blockSelected ->
-                                                            onItemClick(blockSelected)
-                                                        },
-                                                        onDownloadClick = onDownloadClick
+                                    }
+
+                                    if (isCourseNestedListEnabled) {
+                                        item {
+                                            Spacer(Modifier.height(16.dp))
+                                        }
+                                        uiState.courseStructure.blockData.forEach { section ->
+                                            val courseSubSections =
+                                                uiState.courseSubSections[section.id]
+                                            val courseSectionsState =
+                                                uiState.courseSectionsState[section.id]
+
+                                            item {
+                                                Column {
+                                                    CourseExpandableChapterCard(
+                                                        modifier = listPadding,
+                                                        block = section,
+                                                        onItemClick = onExpandClick,
+                                                        arrowDegrees = if (courseSectionsState == true) -90f else 90f
                                                     )
                                                     Divider()
                                                 }
                                             }
+
+                                            courseSubSections?.forEach { subSectionBlock ->
+                                                item {
+                                                    Column {
+                                                        AnimatedVisibility(
+                                                            visible = courseSectionsState == true
+                                                        ) {
+                                                            Column {
+                                                                val downloadsCount =
+                                                                    uiState.subSectionsDownloadsCount[subSectionBlock.id]
+                                                                        ?: 0
+
+                                                                CourseSubSectionItem(
+                                                                    modifier = listPadding,
+                                                                    block = subSectionBlock,
+                                                                    downloadedState = uiState.downloadedState[subSectionBlock.id],
+                                                                    downloadsCount = downloadsCount,
+                                                                    onClick = onSubSectionClick,
+                                                                    onDownloadClick = onDownloadClick
+                                                                )
+                                                                Divider()
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                        return@LazyColumn
+                                    }
+
+                                    items(uiState.courseStructure.blockData) { block ->
+                                        Column(listPadding) {
+                                            if (block.type == BlockType.CHAPTER) {
+                                                Text(
+                                                    modifier = Modifier.padding(
+                                                        top = 36.dp,
+                                                        bottom = 8.dp
+                                                    ),
+                                                    text = block.displayName,
+                                                    style = MaterialTheme.appTypography.titleMedium,
+                                                    color = MaterialTheme.appColors.textPrimaryVariant
+                                                )
+                                            } else {
+                                                CourseSectionCard(
+                                                    block = block,
+                                                    downloadedState = uiState.downloadedState[block.id],
+                                                    onItemClick = onItemClick,
+                                                    onDownloadClick = onDownloadClick
+                                                )
+                                                Divider()
+                                            }
                                         }
                                     }
                                 }
                             }
                         }
-                        PullRefreshIndicator(
-                            isUpdating,
-                            pullRefreshState,
-                            Modifier.align(Alignment.TopCenter)
+                    }
+                    PullRefreshIndicator(
+                        isUpdating,
+                        pullRefreshState,
+                        Modifier.align(Alignment.TopCenter)
+                    )
+                    if (!isInternetConnectionShown && !hasInternetConnection) {
+                        OfflineModeDialog(
+                            Modifier
+                                .fillMaxWidth()
+                                .align(Alignment.BottomCenter),
+                            onDismissCLick = {
+                                isInternetConnectionShown = true
+                            },
+                            onReloadClick = {
+                                isInternetConnectionShown = true
+                                onReloadClick()
+                            }
                         )
-                        if (!isInternetConnectionShown && !hasInternetConnection) {
-                            OfflineModeDialog(
-                                Modifier
-                                    .fillMaxWidth()
-                                    .align(Alignment.BottomCenter),
-                                onDismissCLick = {
-                                    isInternetConnectionShown = true
-                                },
-                                onReloadClick = {
-                                    isInternetConnectionShown = true
-                                    onReloadClick()
-                                }
-                            )
-                        }
                     }
                 }
             }
@@ -343,11 +393,17 @@ private fun CourseVideosScreenPreview() {
             uiMessage = null,
             uiState = CourseVideosUIState.CourseData(
                 mockCourseStructure,
-                emptyMap()
+                emptyMap(),
+                mapOf(),
+                mapOf(),
+                mapOf()
             ),
-            courseTitle = "Course",
+            apiHostUrl = "",
+            isCourseNestedListEnabled = false,
+            isCourseBannerEnabled = true,
             onItemClick = { },
-            onBackClick = {},
+            onExpandClick = { },
+            onSubSectionClick = { },
             hasInternetConnection = true,
             isUpdating = false,
             onSwipeRefresh = {},
@@ -368,9 +424,12 @@ private fun CourseVideosScreenEmptyPreview() {
             uiState = CourseVideosUIState.Empty(
                 "This course does not include any videos."
             ),
-            courseTitle = "Course",
+            apiHostUrl = "",
+            isCourseNestedListEnabled = false,
+            isCourseBannerEnabled = true,
             onItemClick = { },
-            onBackClick = {},
+            onExpandClick = { },
+            onSubSectionClick = { },
             onSwipeRefresh = {},
             onReloadClick = {},
             hasInternetConnection = true,
@@ -390,11 +449,17 @@ private fun CourseVideosScreenTabletPreview() {
             uiMessage = null,
             uiState = CourseVideosUIState.CourseData(
                 mockCourseStructure,
-                emptyMap()
+                emptyMap(),
+                mapOf(),
+                mapOf(),
+                mapOf()
             ),
-            courseTitle = "Course",
+            apiHostUrl = "",
+            isCourseNestedListEnabled = false,
+            isCourseBannerEnabled = true,
             onItemClick = { },
-            onBackClick = {},
+            onExpandClick = { },
+            onSubSectionClick = { },
             onSwipeRefresh = {},
             onReloadClick = {},
             isUpdating = false,
@@ -418,7 +483,9 @@ private val mockChapterBlock = Block(
     studentViewMultiDevice = false,
     blockCounts = BlockCounts(1),
     descendants = emptyList(),
-    completion = 0.0
+    descendantsType = BlockType.CHAPTER,
+    completion = 0.0,
+    containsGatedContent = false
 )
 
 private val mockSequentialBlock = Block(
@@ -434,7 +501,9 @@ private val mockSequentialBlock = Block(
     studentViewMultiDevice = false,
     blockCounts = BlockCounts(1),
     descendants = emptyList(),
-    completion = 0.0
+    descendantsType = BlockType.SEQUENTIAL,
+    completion = 0.0,
+    containsGatedContent = false
 )
 
 private val mockCourseStructure = CourseStructure(
diff --git a/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosUIState.kt b/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosUIState.kt
index 243d749be..72289c7db 100644
--- a/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosUIState.kt
+++ b/course/src/main/java/org/openedx/course/presentation/videos/CourseVideosUIState.kt
@@ -1,5 +1,6 @@
 package org.openedx.course.presentation.videos
 
+import org.openedx.core.domain.model.Block
 import org.openedx.core.domain.model.CourseStructure
 import org.openedx.core.module.db.DownloadedState
 
@@ -7,6 +8,9 @@ sealed class CourseVideosUIState {
     data class CourseData(
         val courseStructure: CourseStructure,
         val downloadedState: Map<String, DownloadedState>,
+        val courseSubSections: Map<String, List<Block>>,
+        val courseSectionsState: Map<String, Boolean>,
+        val subSectionsDownloadsCount: Map<String, Int>
     ) : CourseVideosUIState()
 
     data class Empty(val message: String) : CourseVideosUIState()
diff --git a/course/src/main/res/drawable/ic_calendar_month.xml b/course/src/main/res/drawable/ic_calendar_month.xml
new file mode 100644
index 000000000..434cf9907
--- /dev/null
+++ b/course/src/main/res/drawable/ic_calendar_month.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M17,2c-0.55,0 -1,0.45 -1,1v1H8V3c0,-0.55 -0.45,-1 -1,-1S6,2.45 6,3v1H5C3.89,4 3.01,4.9 3.01,6L3,20c0,1.1 0.89,2 2,2h14c1.1,0 2,-0.9 2,-2V6c0,-1.1 -0.9,-2 -2,-2h-1V3C18,2.45 17.55,2 17,2zM19,20H5V10h14V20zM11,13c0,-0.55 0.45,-1 1,-1s1,0.45 1,1s-0.45,1 -1,1S11,13.55 11,13zM7,13c0,-0.55 0.45,-1 1,-1s1,0.45 1,1s-0.45,1 -1,1S7,13.55 7,13zM15,13c0,-0.55 0.45,-1 1,-1s1,0.45 1,1s-0.45,1 -1,1S15,13.55 15,13zM11,17c0,-0.55 0.45,-1 1,-1s1,0.45 1,1s-0.45,1 -1,1S11,17.55 11,17zM7,17c0,-0.55 0.45,-1 1,-1s1,0.45 1,1s-0.45,1 -1,1S7,17.55 7,17zM15,17c0,-0.55 0.45,-1 1,-1s1,0.45 1,1s-0.45,1 -1,1S15,17.55 15,17z"/>
+</vector>
diff --git a/course/src/main/res/drawable/ic_course_arrow_down.xml b/course/src/main/res/drawable/ic_course_arrow_down.xml
new file mode 100644
index 000000000..8265e6957
--- /dev/null
+++ b/course/src/main/res/drawable/ic_course_arrow_down.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:pathData="M7,10L12,15L17,10H7Z"
+        android:fillColor="#ffffff"/>
+</vector>
diff --git a/course/src/main/res/drawable/ic_course_block.xml b/course/src/main/res/drawable/ic_course_block.xml
index 441f42562..9445f48f0 100644
--- a/course/src/main/res/drawable/ic_course_block.xml
+++ b/course/src/main/res/drawable/ic_course_block.xml
@@ -7,42 +7,42 @@
     <clip-path
         android:pathData="M0,0h24v24h-24z"/>
     <path
-        android:pathData="M9,6H20"
+        android:pathData="M6,15H21"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
         android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
     <path
-        android:pathData="M9,12H20"
+        android:pathData="M21,19H6"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
         android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
     <path
-        android:pathData="M9,18H20"
+        android:pathData="M15,11H21"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
         android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
     <path
-        android:pathData="M5,6V6.01"
+        android:pathData="M21,7H15"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
         android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
     <path
-        android:pathData="M5,12V12.01"
+        android:pathData="M9,9H10C10.198,9 10.391,9.059 10.556,9.169C10.72,9.278 10.848,9.435 10.924,9.617C11,9.8 11.019,10.001 10.981,10.195C10.942,10.389 10.847,10.567 10.707,10.707C10.567,10.847 10.389,10.942 10.195,10.981C10.001,11.019 9.8,11 9.617,10.924C9.435,10.848 9.278,10.72 9.169,10.556C9.059,10.391 9,10.198 9,10V7.5C9,6.97 9.211,6.461 9.586,6.086C9.961,5.711 10.47,5.5 11,5.5"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
         android:strokeColor="#ffffff"
         android:strokeLineCap="round"/>
     <path
-        android:pathData="M5,18V18.01"
+        android:pathData="M3,9H4C4.198,9 4.391,9.059 4.556,9.169C4.72,9.278 4.848,9.435 4.924,9.617C5,9.8 5.019,10.001 4.981,10.195C4.942,10.389 4.847,10.567 4.707,10.707C4.567,10.847 4.389,10.942 4.195,10.981C4.001,11.019 3.8,11 3.617,10.924C3.435,10.848 3.278,10.72 3.169,10.556C3.059,10.391 3,10.198 3,10V7.5C3,6.97 3.211,6.461 3.586,6.086C3.961,5.711 4.47,5.5 5,5.5"
         android:strokeLineJoin="round"
         android:strokeWidth="1.75"
         android:fillColor="#00000000"
diff --git a/course/src/main/res/drawable/ic_course_check.xml b/course/src/main/res/drawable/ic_course_check.xml
new file mode 100644
index 000000000..10551dea9
--- /dev/null
+++ b/course/src/main/res/drawable/ic_course_check.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <path
+        android:pathData="M7.667,1.333C3.987,1.333 1,4.32 1,8C1,11.68 3.987,14.666 7.667,14.666C11.347,14.666 14.333,11.68 14.333,8C14.333,4.32 11.347,1.333 7.667,1.333ZM6.333,11.333L3,8L3.94,7.06L6.333,9.446L11.393,4.386L12.333,5.333L6.333,11.333Z"
+        android:fillColor="#0D7D4D"/>
+</vector>
diff --git a/course/src/main/res/drawable/ic_course_gated.xml b/course/src/main/res/drawable/ic_course_gated.xml
new file mode 100644
index 000000000..bda1fb76a
--- /dev/null
+++ b/course/src/main/res/drawable/ic_course_gated.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <path
+        android:pathData="M8,0L8,0A8,8 0,0 1,16 8L16,8A8,8 0,0 1,8 16L8,16A8,8 0,0 1,0 8L0,8A8,8 0,0 1,8 0z"
+        android:fillColor="#D23228"/>
+    <path
+        android:pathData="M10.667,6.667H9.667V6.071C9.667,5.201 9.03,4.424 8.163,4.341C7.17,4.247 6.333,5.027 6.333,6.001V6.667H5.333V11.334H10.667V6.667ZM8,9.667C7.633,9.667 7.333,9.367 7.333,9.001C7.333,8.634 7.633,8.334 8,8.334C8.367,8.334 8.667,8.634 8.667,9.001C8.667,9.367 8.367,9.667 8,9.667ZM7,6.667V6.001C7,5.447 7.447,5.001 8,5.001C8.553,5.001 9,5.447 9,6.001V6.667H7Z"
+        android:fillColor="#ffffff"/>
+</vector>
diff --git a/course/src/main/res/drawable/ic_lock.xml b/course/src/main/res/drawable/ic_lock.xml
new file mode 100644
index 000000000..68cb9c1f5
--- /dev/null
+++ b/course/src/main/res/drawable/ic_lock.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM12,17c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2 2,0.9 2,2 -0.9,2 -2,2zM9,8L9,6c0,-1.66 1.34,-3 3,-3s3,1.34 3,3v2L9,8z" />
+</vector>
diff --git a/course/src/main/res/layout-land/fragment_course_unit_container.xml b/course/src/main/res/layout-land/fragment_course_unit_container.xml
new file mode 100644
index 000000000..40a03125d
--- /dev/null
+++ b/course/src/main/res/layout-land/fragment_course_unit_container.xml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/background">
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/btnBack"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintEnd_toStartOf="@+id/mediaRouteButton"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <androidx.mediarouter.app.MediaRouteButton
+        android:id="@+id/mediaRouteButton"
+        android:layout_width="24dp"
+        android:layout_height="24dp"
+        android:layout_marginEnd="12dp"
+        android:layout_marginBottom="12dp"
+        android:mediaRouteTypes="user"
+        app:layout_constraintBottom_toBottomOf="@+id/btnBack"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/cv_navigationBar" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subSectionUnitsTitle"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/btnBack" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/horizontalProgress"
+        android:layout_width="match_parent"
+        android:layout_height="4dp"
+        android:layout_marginTop="4dp"
+        android:visibility="gone"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/subSectionUnitsTitle" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/cv_navigationBar"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:elevation="4dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/constraintLayout"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:orientation="vertical"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/horizontalProgress">
+
+        <androidx.compose.ui.platform.ComposeView
+            android:id="@+id/cv_count"
+            android:layout_width="24dp"
+            android:layout_height="match_parent"
+            android:elevation="4dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/viewPager"
+            android:layout_width="0dp"
+            android:layout_height="0dp"
+            android:layout_marginStart="48dp"
+            android:layout_marginTop="8dp"
+            android:layout_marginEnd="48dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+    <View
+        android:id="@+id/subSectionUnitsBg"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="gone" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subSectionUnitsList"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginBottom="16dp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/subSectionUnitsTitle" />
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/course/src/main/res/layout-land/fragment_video_unit.xml b/course/src/main/res/layout-land/fragment_video_unit.xml
new file mode 100644
index 000000000..c80b2fdc4
--- /dev/null
+++ b/course/src/main/res/layout-land/fragment_video_unit.xml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/background">
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cardView"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:cardCornerRadius="20dp"
+        app:cardElevation="0dp"
+        app:layout_constraintDimensionRatio="H,16:9"
+        app:layout_constraintEnd_toStartOf="@id/subtitles"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintWidth_percent="0.6">
+
+        <androidx.media3.ui.PlayerView
+            android:id="@+id/player_view"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@android:color/black"
+            app:resize_mode="fit"
+            app:surface_type="texture_view" />
+
+    </androidx.cardview.widget.CardView>
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subtitles"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_marginHorizontal="20dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.5"
+        app:layout_constraintStart_toEndOf="@id/cardView"
+        app:layout_constraintTop_toTopOf="@+id/cardView" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/cv_rotateHelper"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="24dp"
+        android:layout_marginBottom="64dp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/connectionError"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="gone" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/course/src/main/res/layout-land/fragment_youtube_video_unit.xml b/course/src/main/res/layout-land/fragment_youtube_video_unit.xml
new file mode 100644
index 000000000..b8d5984c2
--- /dev/null
+++ b/course/src/main/res/layout-land/fragment_youtube_video_unit.xml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/background">
+
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cardView"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:cardCornerRadius="20dp"
+        app:cardElevation="0dp"
+        app:layout_constraintDimensionRatio="W,9:16"
+        app:layout_constraintEnd_toStartOf="@id/subtitles"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintWidth_percent="0.6">
+
+        <com.pierfrancescosoffritti.androidyoutubeplayer.core.player.views.YouTubePlayerView
+            android:id="@+id/youtube_player_view"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            app:enableAutomaticInitialization="false" />
+
+    </androidx.cardview.widget.CardView>
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subtitles"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_marginHorizontal="20dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/cardView"
+        app:layout_constraintTop_toTopOf="@+id/cardView" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/cv_rotateHelper"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="24dp"
+        android:layout_marginBottom="64dp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/connectionError"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="gone" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/course/src/main/res/layout-w600dp-h480dp/fragment_course_unit_container.xml b/course/src/main/res/layout-w600dp-h480dp/fragment_course_unit_container.xml
index 8dbf3ac6f..f06c77405 100644
--- a/course/src/main/res/layout-w600dp-h480dp/fragment_course_unit_container.xml
+++ b/course/src/main/res/layout-w600dp-h480dp/fragment_course_unit_container.xml
@@ -5,34 +5,49 @@
     android:layout_height="match_parent"
     android:background="@color/background">
 
-    <View
-        android:id="@+id/statusBarInset"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
-
     <FrameLayout
         android:id="@+id/frameBack"
-        android:layout_width="wrap_content"
+        android:layout_width="560dp"
         android:layout_height="wrap_content"
-        android:maxWidth="560dp"
-        android:minWidth="560dp"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@id/statusBarInset">
+        app:layout_constraintTop_toTopOf="parent">
 
         <androidx.compose.ui.platform.ComposeView
             android:id="@+id/btnBack"
-            android:layout_width="24dp"
-            android:layout_height="24dp"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:layout_marginStart="12dp"
-            android:layout_marginTop="12dp" />
+            android:layout_marginTop="12dp"
+            android:layout_marginEnd="12dp" />
 
+        <androidx.mediarouter.app.MediaRouteButton
+            android:id="@+id/mediaRouteButton"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_gravity="end|bottom"
+            android:layout_marginTop="12dp"
+            android:layout_marginEnd="24dp"
+            android:mediaRouteTypes="user" />
     </FrameLayout>
 
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subSectionUnitsTitle"
+        android:layout_width="560dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/frameBack" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/horizontalProgress"
+        android:layout_width="match_parent"
+        android:layout_height="4dp"
+        android:layout_marginTop="4dp"
+        android:visibility="gone"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/subSectionUnitsTitle" />
+
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="0dp"
@@ -40,12 +55,13 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/frameBack">
+        app:layout_constraintTop_toBottomOf="@+id/horizontalProgress">
 
         <androidx.compose.ui.platform.ComposeView
             android:id="@+id/cv_navigationBar"
             android:layout_width="match_parent"
-            android:layout_height="72dp"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="16dp"
             android:elevation="4dp"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
@@ -60,25 +76,32 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <androidx.cardview.widget.CardView
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/viewPager"
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:layout_marginTop="24dp"
-            app:cardBackgroundColor="@android:color/transparent"
-            app:cardCornerRadius="30dp"
-            app:cardElevation="0dp"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
-
-            <androidx.viewpager2.widget.ViewPager2
-                android:id="@+id/viewPager"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent" />
-
-        </androidx.cardview.widget.CardView>
+            app:layout_constraintTop_toTopOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
+    <View
+        android:id="@+id/subSectionUnitsBg"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="gone" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subSectionUnitsList"
+        android:layout_width="560dp"
+        android:layout_height="0dp"
+        android:layout_marginBottom="48dp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/subSectionUnitsTitle" />
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/course/src/main/res/layout-w600dp-h480dp/fragment_video_unit.xml b/course/src/main/res/layout-w600dp-h480dp/fragment_video_unit.xml
index eee099310..72a272f74 100644
--- a/course/src/main/res/layout-w600dp-h480dp/fragment_video_unit.xml
+++ b/course/src/main/res/layout-w600dp-h480dp/fragment_video_unit.xml
@@ -27,6 +27,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginTop="16dp"
+            android:contentDescription="@string/course_accessibility_video_player"
             app:cardCornerRadius="20dp"
             app:cardElevation="0dp"
             app:layout_constraintDimensionRatio="W,9:16"
@@ -48,15 +49,14 @@
             android:id="@+id/subtitles"
             android:layout_width="560dp"
             android:layout_height="0dp"
-            android:layout_marginTop="28dp"
             android:layout_marginHorizontal="24dp"
+            android:layout_marginTop="28dp"
             android:layout_marginBottom="64dp"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/cardView"
-            />
+            app:layout_constraintTop_toBottomOf="@id/cardView" />
 
         <androidx.compose.ui.platform.ComposeView
             android:id="@+id/cv_rotateHelper"
diff --git a/course/src/main/res/layout-w600dp-h480dp/fragment_youtube_video_unit.xml b/course/src/main/res/layout-w600dp-h480dp/fragment_youtube_video_unit.xml
index 4a0af6144..848a27898 100644
--- a/course/src/main/res/layout-w600dp-h480dp/fragment_youtube_video_unit.xml
+++ b/course/src/main/res/layout-w600dp-h480dp/fragment_youtube_video_unit.xml
@@ -27,6 +27,7 @@
             android:layout_width="match_parent"
             android:layout_height="0dp"
             android:layout_marginTop="16dp"
+            android:contentDescription="@string/course_accessibility_video_player"
             app:cardCornerRadius="20dp"
             app:cardElevation="0dp"
             app:layout_constraintDimensionRatio="W,9:16"
@@ -46,15 +47,14 @@
             android:id="@+id/subtitles"
             android:layout_width="560dp"
             android:layout_height="0dp"
-            android:layout_marginTop="28dp"
             android:layout_marginHorizontal="24dp"
+            android:layout_marginTop="28dp"
             android:layout_marginBottom="64dp"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.5"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/cardView"
-            />
+            app:layout_constraintTop_toBottomOf="@id/cardView" />
 
         <androidx.compose.ui.platform.ComposeView
             android:id="@+id/cv_rotateHelper"
diff --git a/course/src/main/res/layout/fragment_course_container.xml b/course/src/main/res/layout/fragment_course_container.xml
index 6a88df789..878087ee0 100644
--- a/course/src/main/res/layout/fragment_course_container.xml
+++ b/course/src/main/res/layout/fragment_course_container.xml
@@ -2,7 +2,26 @@
 <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:background="@color/background">
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/toolbar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <com.google.android.material.tabs.TabLayout
+        android:id="@+id/tabLayout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@color/background"
+        android:visibility="gone"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/toolbar"
+        app:tabMode="scrollable"
+        app:tabTextAppearance="@style/TabLayoutTextAppearance" />
 
     <androidx.viewpager2.widget.ViewPager2
         android:id="@+id/viewPager"
@@ -13,8 +32,7 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
-
+        app:layout_constraintTop_toBottomOf="@+id/tabLayout" />
 
     <com.google.android.material.bottomnavigation.BottomNavigationView
         android:id="@+id/bottomNavView"
diff --git a/course/src/main/res/layout/fragment_course_unit_container.xml b/course/src/main/res/layout/fragment_course_unit_container.xml
index a99cdb98c..2a5de0a9b 100644
--- a/course/src/main/res/layout/fragment_course_unit_container.xml
+++ b/course/src/main/res/layout/fragment_course_unit_container.xml
@@ -5,22 +5,38 @@
     android:layout_height="match_parent"
     android:background="@color/background">
 
-    <View
-        android:id="@+id/statusBarInset"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintEnd_toEndOf="parent"
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/btnBack"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <androidx.compose.ui.platform.ComposeView
-        android:id="@+id/btnBack"
+    <androidx.mediarouter.app.MediaRouteButton
+        android:id="@+id/mediaRouteButton"
         android:layout_width="24dp"
         android:layout_height="24dp"
-        android:layout_marginStart="12dp"
-        android:layout_marginTop="12dp"
+        android:layout_marginEnd="12dp"
+        android:layout_marginBottom="12dp"
+        android:mediaRouteTypes="user"
+        app:layout_constraintBottom_toBottomOf="@+id/btnBack"
+        app:layout_constraintEnd_toEndOf="parent" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subSectionUnitsTitle"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/btnBack" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/horizontalProgress"
+        android:layout_width="match_parent"
+        android:layout_height="4dp"
+        android:layout_marginTop="4dp"
+        android:visibility="gone"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@id/statusBarInset" />
+        app:layout_constraintTop_toBottomOf="@+id/subSectionUnitsTitle" />
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
@@ -29,12 +45,12 @@
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/btnBack">
+        app:layout_constraintTop_toBottomOf="@+id/horizontalProgress">
 
         <androidx.compose.ui.platform.ComposeView
             android:id="@+id/cv_navigationBar"
             android:layout_width="match_parent"
-            android:layout_height="72dp"
+            android:layout_height="wrap_content"
             android:elevation="4dp"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
@@ -45,29 +61,38 @@
             android:layout_width="24dp"
             android:layout_height="match_parent"
             android:elevation="4dp"
+            android:visibility="gone"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <androidx.cardview.widget.CardView
+        <androidx.viewpager2.widget.ViewPager2
+            android:id="@+id/viewPager"
             android:layout_width="0dp"
             android:layout_height="0dp"
-            android:layout_marginTop="24dp"
-            app:cardBackgroundColor="@android:color/transparent"
-            app:cardCornerRadius="30dp"
-            app:cardElevation="0dp"
+            android:layout_marginTop="4dp"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
-
-            <androidx.viewpager2.widget.ViewPager2
-                android:id="@+id/viewPager"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent" />
-
-        </androidx.cardview.widget.CardView>
+            app:layout_constraintTop_toTopOf="parent" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 
+    <View
+        android:id="@+id/subSectionUnitsBg"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="gone" />
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/subSectionUnitsList"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
+        android:layout_marginBottom="84dp"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/subSectionUnitsTitle" />
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/course/src/main/res/layout/fragment_video_unit.xml b/course/src/main/res/layout/fragment_video_unit.xml
index 45227eff0..86f3f9cfd 100644
--- a/course/src/main/res/layout/fragment_video_unit.xml
+++ b/course/src/main/res/layout/fragment_video_unit.xml
@@ -20,6 +20,7 @@
         android:layout_height="wrap_content"
         android:layout_marginHorizontal="24dp"
         android:layout_marginTop="16dp"
+        android:contentDescription="@string/course_accessibility_video_player"
         app:cardCornerRadius="20dp"
         app:cardElevation="0dp"
         app:layout_constraintDimensionRatio="W,9:16"
@@ -41,26 +42,14 @@
         android:id="@+id/subtitles"
         android:layout_width="match_parent"
         android:layout_height="0dp"
-        android:layout_marginTop="28dp"
         android:layout_marginHorizontal="24dp"
+        android:layout_marginTop="28dp"
         android:layout_marginBottom="64dp"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/cardView"
-        />
-
-    <androidx.compose.ui.platform.ComposeView
-        android:id="@+id/cv_rotateHelper"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginHorizontal="24dp"
-        android:layout_marginBottom="64dp"
-        android:visibility="gone"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintTop_toBottomOf="@id/cardView" />
 
     <androidx.compose.ui.platform.ComposeView
         android:id="@+id/connectionError"
diff --git a/course/src/main/res/layout/fragment_youtube_video_unit.xml b/course/src/main/res/layout/fragment_youtube_video_unit.xml
index c6d61276a..6af485d49 100644
--- a/course/src/main/res/layout/fragment_youtube_video_unit.xml
+++ b/course/src/main/res/layout/fragment_youtube_video_unit.xml
@@ -46,19 +46,7 @@
         app:layout_constraintHorizontal_bias="0.5"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/cardView"
-        />
-
-    <androidx.compose.ui.platform.ComposeView
-        android:id="@+id/cv_rotateHelper"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginHorizontal="24dp"
-        android:layout_marginBottom="64dp"
-        android:visibility="gone"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:layout_constraintTop_toBottomOf="@id/cardView" />
 
     <androidx.compose.ui.platform.ComposeView
         android:id="@+id/connectionError"
diff --git a/course/src/main/res/menu/bottom_course_container_menu.xml b/course/src/main/res/menu/bottom_course_container_menu.xml
index 8ee927041..da9eee1b9 100644
--- a/course/src/main/res/menu/bottom_course_container_menu.xml
+++ b/course/src/main/res/menu/bottom_course_container_menu.xml
@@ -2,7 +2,7 @@
 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 
     <item
-        android:id="@+id/outline"
+        android:id="@+id/course"
         android:title="@string/course_navigation_course"
         android:enabled="true"
         android:icon="@drawable/ic_course_navigation_outline"/>
@@ -19,6 +19,12 @@
         android:enabled="true"
         android:icon="@drawable/ic_course_navigation_discussions"/>
 
+    <item
+        android:id="@+id/dates"
+        android:title="@string/course_navigation_dates"
+        android:enabled="true"
+        android:icon="@drawable/ic_calendar_month"/>
+
     <item
         android:id="@+id/resources"
         android:title="@string/course_navigation_handouts"
diff --git a/course/src/main/res/values-uk/strings.xml b/course/src/main/res/values-uk/strings.xml
index 44ff2fc55..3fa3fd87d 100644
--- a/course/src/main/res/values-uk/strings.xml
+++ b/course/src/main/res/values-uk/strings.xml
@@ -19,7 +19,6 @@
     <string name="course_navigation_next">Далі</string>
     <string name="course_navigation_next_unit">Наступна одиниця</string>
     <string name="course_navigation_finish">Завершити</string>
-    <string name="course_video_rotate_for_fullscreen">Поверніть свій пристрій для перегляду цього відео на повний екран.</string>
     <string name="course_does_not_include_videos">Цей курс не містить відео.</string>
     <string name="course_resume_unit_title">Остання одиниця:</string>
     <string name="course_resume_unit_btn">Продовжити</string>
@@ -34,7 +33,6 @@
     <string name="course_back_to_outline">Повернутись до модуля</string>
     <string name="course_you_cant_enroll">Ви не можете записатися на цей курс, оскільки термін запису вже минув.</string>
     <string name="course_not_started">Цей курс ще не розпочався.</string>
-    <string name="course_access_expired">Ваш доступ до цього курсу закінчився.</string>
     <string name="course_not_connected_to_internet">Ви не підключені до Інтернету. Будь ласка, перевірте ваше підключення до Інтернету.</string>
     <string name="course_navigation_course">Курс</string>
     <string name="course_navigation_video">Відео</string>
@@ -46,6 +44,16 @@
     <string name="course_open_in_browser">Відкрити в браузері</string>
     <string name="course_subtitles">Субтитри</string>
     <string name="course_continue_with">Остання активність:</string>
-    <string name="course_continue">Продовжити</string>
+    <string name="course_resume">Продовжити</string>
     <string name="course_to_proceed">Щоб перейти до \"%s\", натисніть \"Наступний розділ\".</string>
-</resources>
\ No newline at end of file
+
+    <!-- Accessibility -->
+    <string name="course_accessibility_header_image_for">Заглавне зображення для курсу %1$s</string>
+    <string name="course_accessibility_play_video">Відтворити відео</string>
+    <string name="course_accessibility_video_player">Відеоплеєр</string>
+    <string name="course_accessibility_remove_course_section">Видалити секцію курсу</string>
+    <string name="course_accessibility_download_course_section">Завантажити секцію курсу</string>
+    <string name="course_accessibility_stop_downloading_course_section">Зупинити завантаження секції курсу</string>
+    <string name="course_accessibility_section_completed">Секція завершена</string>
+    <string name="course_accessibility_section_uncompleted">Секція не завершена</string>
+</resources>
diff --git a/course/src/main/res/values/strings.xml b/course/src/main/res/values/strings.xml
index a9fb56914..32a6875fa 100644
--- a/course/src/main/res/values/strings.xml
+++ b/course/src/main/res/values/strings.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<resources>
+<resources xmlns:tools="http://schemas.android.com/tools">
     <string name="course_enroll_now">Enroll now</string>
     <string name="course_view_course">View course</string>
     <string name="course_details">Course details</string>
@@ -19,7 +19,6 @@
     <string name="course_navigation_next">Next</string>
     <string name="course_navigation_next_unit">Next Unit</string>
     <string name="course_navigation_finish">Finish</string>
-    <string name="course_video_rotate_for_fullscreen">Rotate your device to view this video in full screen.</string>
     <string name="course_does_not_include_videos">This course does not include any videos.</string>
     <string name="course_resume_unit_title">Last unit:</string>
     <string name="course_resume_unit_btn">Resume</string>
@@ -34,7 +33,6 @@
     <string name="course_next_section">Next section</string>
     <string name="course_you_cant_enroll">You cannot enroll in this course because the enrollment date is over.</string>
     <string name="course_not_started">This course hasn’t started yet.</string>
-    <string name="course_access_expired">Your access to this course has expired.</string>
     <string name="course_not_connected_to_internet">You are not connected to the Internet. Please check your Internet connection.</string>
     <string name="course_navigation_course">Course</string>
     <string name="course_navigation_video">Video</string>
@@ -46,6 +44,22 @@
     <string name="course_open_in_browser">Open in browser</string>
     <string name="course_subtitles">Subtitles</string>
     <string name="course_continue_with">Continue with:</string>
-    <string name="course_continue">Continue</string>
+    <string name="course_resume">Resume</string>
     <string name="course_to_proceed">To proceed with \"%s\" press \"Next section\".</string>
-</resources>
\ No newline at end of file
+    <string name="course_gated_content_label">Some content in this part of the course is locked for upgraded users only.</string>
+    <string name="course_navigation_dates" tools:ignore="MissingTranslation">Dates</string>
+    <string name="course_you_are_already_enrolled" tools:ignore="MissingTranslation">You are already enrolled in this course.</string>
+    <string name="course_discover" tools:ignore="MissingTranslation">Discover</string>
+    <!-- Error Message when course dates are not available -->
+    <string name="course_dates_unavailable_message" tools:ignore="MissingTranslation">Course dates are not currently available.</string>
+
+    <!-- Accessibility -->
+    <string name="course_accessibility_header_image_for">Header image for %1$s</string>
+    <string name="course_accessibility_play_video">Play video</string>
+    <string name="course_accessibility_video_player">Video player</string>
+    <string name="course_accessibility_remove_course_section">Remove course section</string>
+    <string name="course_accessibility_download_course_section">Download course section</string>
+    <string name="course_accessibility_stop_downloading_course_section">Stop downloading course section</string>
+    <string name="course_accessibility_section_completed">Section completed</string>
+    <string name="course_accessibility_section_uncompleted">Section uncompleted</string>
+</resources>
diff --git a/course/src/main/res/values/values.xml b/course/src/main/res/values/values.xml
new file mode 100644
index 000000000..917f92663
--- /dev/null
+++ b/course/src/main/res/values/values.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="TabLayoutTextAppearance" parent="TextAppearance.Design.Tab">
+        <item name="textAllCaps">false</item>
+        <item name="android:textAllCaps">false</item>
+    </style>
+</resources>
\ No newline at end of file
diff --git a/course/src/test/java/org/openedx/course/presentation/container/CourseContainerViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/container/CourseContainerViewModelTest.kt
index 3aff2df2b..06c6ebb3d 100644
--- a/course/src/test/java/org/openedx/course/presentation/container/CourseContainerViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/container/CourseContainerViewModelTest.kt
@@ -20,7 +20,9 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.config.Config
 import java.net.UnknownHostException
+import java.util.Date
 
 @OptIn(ExperimentalCoroutinesApi::class)
 class CourseContainerViewModelTest {
@@ -31,6 +33,7 @@ class CourseContainerViewModelTest {
     private val dispatcher = StandardTestDispatcher()
 
     private val resourceManager = mockk<ResourceManager>()
+    private val config = mockk<Config>()
     private val interactor = mockk<CourseInteractor>()
     private val networkConnection = mockk<NetworkConnection>()
     private val notifier = spyk<CourseNotifier>()
@@ -46,7 +49,7 @@ class CourseContainerViewModelTest {
         name = "Course name",
         number = "",
         org = "Org",
-        start = null,
+        start = Date(0),
         startDisplay = "",
         startType = "",
         end = null,
@@ -79,6 +82,8 @@ class CourseContainerViewModelTest {
     fun `preloadCourseStructure internet connection exception`() = runTest {
         val viewModel = CourseContainerViewModel(
             "",
+            "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -102,6 +107,8 @@ class CourseContainerViewModelTest {
     fun `preloadCourseStructure unknown exception`() = runTest {
         val viewModel = CourseContainerViewModel(
             "",
+            "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -125,6 +132,8 @@ class CourseContainerViewModelTest {
     fun `preloadCourseStructure success with internet`() = runTest {
         val viewModel = CourseContainerViewModel(
             "",
+            "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -148,6 +157,8 @@ class CourseContainerViewModelTest {
     fun `preloadCourseStructure success without internet`() = runTest {
         val viewModel = CourseContainerViewModel(
             "",
+            "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -172,6 +183,8 @@ class CourseContainerViewModelTest {
     fun `updateData no internet connection exception`() = runTest {
         val viewModel = CourseContainerViewModel(
             "",
+            "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -194,6 +207,8 @@ class CourseContainerViewModelTest {
     fun `updateData unknown exception`() = runTest {
         val viewModel = CourseContainerViewModel(
             "",
+            "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -216,6 +231,8 @@ class CourseContainerViewModelTest {
     fun `updateData success`() = runTest {
         val viewModel = CourseContainerViewModel(
             "",
+            "",
+            config,
             interactor,
             resourceManager,
             notifier,
diff --git a/course/src/test/java/org/openedx/course/presentation/dates/CourseDatesViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/dates/CourseDatesViewModelTest.kt
new file mode 100644
index 000000000..6419ed2cd
--- /dev/null
+++ b/course/src/test/java/org/openedx/course/presentation/dates/CourseDatesViewModelTest.kt
@@ -0,0 +1,182 @@
+package org.openedx.course.presentation.dates
+
+import androidx.arch.core.executor.testing.InstantTaskExecutorRule
+import io.mockk.coEvery
+import io.mockk.coVerify
+import io.mockk.every
+import io.mockk.mockk
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.test.StandardTestDispatcher
+import kotlinx.coroutines.test.advanceUntilIdle
+import kotlinx.coroutines.test.resetMain
+import kotlinx.coroutines.test.runTest
+import kotlinx.coroutines.test.setMain
+import org.junit.After
+import org.junit.Assert
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+import org.junit.rules.TestRule
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.data.model.DateType
+import org.openedx.core.domain.model.CourseDateBlock
+import org.openedx.core.domain.model.CourseDatesBannerInfo
+import org.openedx.core.domain.model.CourseDatesResult
+import org.openedx.core.domain.model.CourseStructure
+import org.openedx.core.domain.model.CoursewareAccess
+import org.openedx.core.domain.model.DatesSection
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.course.domain.interactor.CourseInteractor
+import java.net.UnknownHostException
+import java.util.Date
+
+@OptIn(ExperimentalCoroutinesApi::class)
+class CourseDatesViewModelTest {
+    @get:Rule
+    val testInstantTaskExecutorRule: TestRule = InstantTaskExecutorRule()
+
+    private val dispatcher = StandardTestDispatcher()
+
+    private val resourceManager = mockk<ResourceManager>()
+    private val interactor = mockk<CourseInteractor>()
+    private val networkConnection = mockk<NetworkConnection>()
+
+    private val noInternet = "Slow or no internet connection"
+    private val somethingWrong = "Something went wrong"
+
+    private val dateBlock = CourseDateBlock(
+        complete = false,
+        date = Date(),
+        dateType = DateType.TODAY_DATE,
+        description = "Mocked Course Date Description"
+    )
+    private val mockDateBlocks = linkedMapOf(
+        Pair(
+            DatesSection.COMPLETED,
+            listOf(dateBlock, dateBlock)
+        ),
+        Pair(
+            DatesSection.PAST_DUE,
+            listOf(dateBlock, dateBlock)
+        ),
+        Pair(
+            DatesSection.TODAY,
+            listOf(dateBlock, dateBlock)
+        )
+    )
+    private val mockCourseDatesBannerInfo = CourseDatesBannerInfo(
+        missedDeadlines = true,
+        missedGatedContent = false,
+        verifiedUpgradeLink = "",
+        contentTypeGatingEnabled = false,
+        hasEnded = true,
+    )
+    private val mockedCourseDatesResult = CourseDatesResult(
+        datesSection = mockDateBlocks,
+        courseBanner = mockCourseDatesBannerInfo,
+    )
+    private val courseStructure = CourseStructure(
+        root = "",
+        blockData = listOf(),
+        id = "id",
+        name = "Course name",
+        number = "",
+        org = "Org",
+        start = Date(0),
+        startDisplay = "",
+        startType = "",
+        end = null,
+        coursewareAccess = CoursewareAccess(
+            true,
+            "",
+            "",
+            "",
+            "",
+            ""
+        ),
+        media = null,
+        certificate = null,
+        isSelfPaced = true,
+    )
+
+    @Before
+    fun setUp() {
+        Dispatchers.setMain(dispatcher)
+        every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
+        every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
+        every { interactor.getCourseStructureFromCache() } returns courseStructure
+    }
+
+    @After
+    fun tearDown() {
+        Dispatchers.resetMain()
+    }
+
+    @Test
+    fun `getCourseDates no internet connection exception`() = runTest {
+        val viewModel = CourseDatesViewModel("", true, interactor, networkConnection, resourceManager)
+        every { networkConnection.isOnline() } returns true
+        coEvery { interactor.getCourseDates(any()) } throws UnknownHostException()
+        advanceUntilIdle()
+
+        coVerify(exactly = 1) { interactor.getCourseDates(any()) }
+
+        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
+
+        Assert.assertEquals(noInternet, message?.message)
+        assert(viewModel.updating.value == false)
+        assert(viewModel.uiState.value is DatesUIState.Loading)
+    }
+
+    @Test
+    fun `getCourseDates unknown exception`() = runTest {
+        val viewModel = CourseDatesViewModel("", true, interactor, networkConnection, resourceManager)
+        every { networkConnection.isOnline() } returns true
+        coEvery { interactor.getCourseDates(any()) } throws Exception()
+        advanceUntilIdle()
+
+        coVerify(exactly = 1) { interactor.getCourseDates(any()) }
+
+        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
+
+        Assert.assertEquals(somethingWrong, message?.message)
+        assert(viewModel.updating.value == false)
+        assert(viewModel.uiState.value is DatesUIState.Loading)
+    }
+
+    @Test
+    fun `getCourseDates success with internet`() = runTest {
+        val viewModel = CourseDatesViewModel("", true, interactor, networkConnection, resourceManager)
+        every { networkConnection.isOnline() } returns true
+        coEvery { interactor.getCourseDates(any()) } returns mockedCourseDatesResult
+
+        advanceUntilIdle()
+
+        coVerify(exactly = 1) { interactor.getCourseDates(any()) }
+
+        assert(viewModel.uiMessage.value == null)
+        assert(viewModel.updating.value == false)
+        assert(viewModel.uiState.value is DatesUIState.Dates)
+    }
+
+    @Test
+    fun `getCourseDates success with EmptyList`() = runTest {
+        val viewModel = CourseDatesViewModel("", true, interactor, networkConnection, resourceManager)
+        every { networkConnection.isOnline() } returns true
+        coEvery { interactor.getCourseDates(any()) } returns CourseDatesResult(
+            datesSection = linkedMapOf(),
+            courseBanner = mockCourseDatesBannerInfo,
+        )
+
+        advanceUntilIdle()
+
+        coVerify(exactly = 1) { interactor.getCourseDates(any()) }
+
+        assert(viewModel.uiMessage.value == null)
+        assert(viewModel.updating.value == false)
+        assert(viewModel.uiState.value is DatesUIState.Empty)
+    }
+}
diff --git a/course/src/test/java/org/openedx/course/presentation/detail/CourseDetailsViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/detail/CourseDetailsViewModelTest.kt
index e820a1ec7..5f67f172c 100644
--- a/course/src/test/java/org/openedx/course/presentation/detail/CourseDetailsViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/detail/CourseDetailsViewModelTest.kt
@@ -1,27 +1,38 @@
 package org.openedx.course.presentation.detail
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import org.openedx.core.system.connection.NetworkConnection
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.Course
-import org.openedx.core.domain.model.Media
-import org.openedx.core.system.ResourceManager
-import org.openedx.core.system.notifier.CourseDashboardUpdate
-import org.openedx.core.system.notifier.CourseNotifier
-import org.openedx.course.domain.interactor.CourseInteractor
-import org.openedx.course.presentation.CourseAnalytics
-import io.mockk.*
+import io.mockk.coEvery
+import io.mockk.coVerify
+import io.mockk.every
+import io.mockk.mockk
+import io.mockk.spyk
+import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.delay
-import kotlinx.coroutines.test.*
+import kotlinx.coroutines.test.StandardTestDispatcher
+import kotlinx.coroutines.test.advanceUntilIdle
+import kotlinx.coroutines.test.resetMain
+import kotlinx.coroutines.test.runTest
+import kotlinx.coroutines.test.setMain
 import org.junit.After
 import org.junit.Assert.assertEquals
 import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.domain.model.Course
+import org.openedx.core.domain.model.Media
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.CourseDashboardUpdate
+import org.openedx.core.system.notifier.CourseNotifier
+import org.openedx.course.domain.interactor.CourseInteractor
+import org.openedx.course.presentation.CourseAnalytics
 import java.net.UnknownHostException
 
 @OptIn(ExperimentalCoroutinesApi::class)
@@ -32,6 +43,8 @@ class CourseDetailsViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
+    private val preferencesManager = mockk<CorePreferences>()
     private val resourceManager = mockk<ResourceManager>()
     private val interactor = mockk<CourseInteractor>()
     private val networkConnection = mockk<NetworkConnection>()
@@ -70,6 +83,7 @@ class CourseDetailsViewModelTest {
         Dispatchers.setMain(dispatcher)
         every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
+        every { config.getApiHostURL() } returns "http://localhost:8000"
     }
 
     @After
@@ -79,8 +93,16 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `getCourseDetails no internet connection exception`() = runTest {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getCourseDetails(any()) } throws UnknownHostException()
         advanceUntilIdle()
@@ -95,8 +117,16 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `getCourseDetails unknown exception`() = runTest {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getCourseDetails(any()) } throws Exception()
         advanceUntilIdle()
@@ -111,8 +141,18 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `getCourseDetails success with internet`() = runTest {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
+        every { config.isPreLoginExperienceEnabled() } returns false
+        every { preferencesManager.user } returns null
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getCourseDetails(any()) } returns mockk()
 
@@ -126,8 +166,18 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `getCourseDetails success without internet`() = runTest {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
+        every { config.isPreLoginExperienceEnabled() } returns false
+        every { preferencesManager.user } returns null
         every { networkConnection.isOnline() } returns false
         coEvery { interactor.getCourseDetailsFromCache(any()) } returns mockk()
 
@@ -142,8 +192,18 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `enrollInACourse internet connection error`() = runTest {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
+        every { config.isPreLoginExperienceEnabled() } returns false
+        every { preferencesManager.user } returns null
         coEvery { interactor.enrollInACourse(any()) } throws UnknownHostException()
         coEvery { notifier.send(CourseDashboardUpdate()) } returns Unit
         every { networkConnection.isOnline() } returns true
@@ -165,8 +225,18 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `enrollInACourse unknown exception`() = runTest {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
+        every { config.isPreLoginExperienceEnabled() } returns false
+        every { preferencesManager.user } returns null
         coEvery { interactor.enrollInACourse(any()) } throws Exception()
         coEvery { notifier.send(CourseDashboardUpdate()) } returns Unit
         every { networkConnection.isOnline() } returns true
@@ -189,8 +259,18 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `enrollInACourse success`() = runTest {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
+        every { config.isPreLoginExperienceEnabled() } returns false
+        every { preferencesManager.user } returns null
         every { analytics.courseEnrollClickedEvent(any(), any()) } returns Unit
         every { analytics.courseEnrollSuccessEvent(any(), any()) } returns Unit
         coEvery { interactor.enrollInACourse(any()) } returns Unit
@@ -213,8 +293,16 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `getCourseAboutBody contains black`() {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
         val overview = viewModel.getCourseAboutBody(ULong.MAX_VALUE, ULong.MIN_VALUE)
         val count = overview.contains("black")
         assert(count)
@@ -222,11 +310,19 @@ class CourseDetailsViewModelTest {
 
     @Test
     fun `getCourseAboutBody don't contains black`() {
-        val viewModel =
-            CourseDetailsViewModel("", networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = CourseDetailsViewModel(
+            "",
+            config,
+            preferencesManager,
+            networkConnection,
+            interactor,
+            resourceManager,
+            notifier,
+            analytics
+        )
         val overview = viewModel.getCourseAboutBody(ULong.MAX_VALUE, ULong.MAX_VALUE)
         val count = overview.contains("black")
         assert(!count)
     }
 
-}
\ No newline at end of file
+}
diff --git a/course/src/test/java/org/openedx/course/presentation/handouts/HandoutsViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/handouts/HandoutsViewModelTest.kt
index cbd2821a9..7c8ab38df 100644
--- a/course/src/test/java/org/openedx/course/presentation/handouts/HandoutsViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/handouts/HandoutsViewModelTest.kt
@@ -1,10 +1,9 @@
 package org.openedx.course.presentation.handouts
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import org.openedx.core.domain.model.*
-import org.openedx.course.domain.interactor.CourseInteractor
 import io.mockk.coEvery
 import io.mockk.coVerify
+import io.mockk.every
 import io.mockk.mockk
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
@@ -15,6 +14,9 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.config.Config
+import org.openedx.core.domain.model.*
+import org.openedx.course.domain.interactor.CourseInteractor
 import java.net.UnknownHostException
 import java.util.*
 
@@ -26,6 +28,7 @@ class HandoutsViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
     private val interactor = mockk<CourseInteractor>()
 
     //region mockHandoutsModel
@@ -37,6 +40,7 @@ class HandoutsViewModelTest {
     @Before
     fun setUp() {
         Dispatchers.setMain(dispatcher)
+        every { config.getApiHostURL() } returns "http://localhost:8000"
     }
 
     @After
@@ -46,7 +50,7 @@ class HandoutsViewModelTest {
 
     @Test
     fun `getEnrolledCourse no internet connection exception`() = runTest {
-        val viewModel = HandoutsViewModel("", "Handouts", interactor)
+        val viewModel = HandoutsViewModel("", config, "Handouts", interactor)
         coEvery { interactor.getHandouts(any()) } throws UnknownHostException()
 
         advanceUntilIdle()
@@ -56,7 +60,7 @@ class HandoutsViewModelTest {
 
     @Test
     fun `getEnrolledCourse unknown exception`() = runTest {
-        val viewModel = HandoutsViewModel("", "Handouts", interactor)
+        val viewModel = HandoutsViewModel("", config, "Handouts", interactor)
         coEvery { interactor.getHandouts(any()) } throws Exception()
         advanceUntilIdle()
 
@@ -65,7 +69,7 @@ class HandoutsViewModelTest {
 
     @Test
     fun `getEnrolledCourse handouts success`() = runTest {
-        val viewModel = HandoutsViewModel("", HandoutsType.Handouts.name, interactor)
+        val viewModel = HandoutsViewModel("", config, HandoutsType.Handouts.name, interactor)
         coEvery { interactor.getHandouts(any()) } returns HandoutsModel("hello")
 
         advanceUntilIdle()
@@ -77,7 +81,7 @@ class HandoutsViewModelTest {
 
     @Test
     fun `getEnrolledCourse announcements success`() = runTest {
-        val viewModel = HandoutsViewModel("", HandoutsType.Announcements.name, interactor)
+        val viewModel = HandoutsViewModel("", config, HandoutsType.Announcements.name, interactor)
         coEvery { interactor.getAnnouncements(any()) } returns listOf(
             AnnouncementModel(
                 "date",
@@ -94,7 +98,7 @@ class HandoutsViewModelTest {
 
     @Test
     fun `injectDarkMode test`() = runTest {
-        val viewModel = HandoutsViewModel("", HandoutsType.Announcements.name, interactor)
+        val viewModel = HandoutsViewModel("", config, HandoutsType.Announcements.name, interactor)
         coEvery { interactor.getAnnouncements(any()) } returns listOf(
             AnnouncementModel(
                 "date",
diff --git a/course/src/test/java/org/openedx/course/presentation/outline/CourseOutlineViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/outline/CourseOutlineViewModelTest.kt
index 259637f67..e26cb019f 100644
--- a/course/src/test/java/org/openedx/course/presentation/outline/CourseOutlineViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/outline/CourseOutlineViewModelTest.kt
@@ -4,18 +4,6 @@ import androidx.arch.core.executor.testing.InstantTaskExecutorRule
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LifecycleRegistry
-import org.openedx.core.BlockType
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.*
-import org.openedx.core.module.DownloadWorkerController
-import org.openedx.core.module.db.*
-import org.openedx.core.system.ResourceManager
-import org.openedx.core.system.connection.NetworkConnection
-import org.openedx.core.system.notifier.CourseNotifier
-import org.openedx.core.system.notifier.CourseStructureUpdated
-import org.openedx.course.domain.interactor.CourseInteractor
-import org.openedx.course.presentation.CourseAnalytics
 import io.mockk.*
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
@@ -28,7 +16,20 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.BlockType
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.domain.model.*
+import org.openedx.core.module.DownloadWorkerController
+import org.openedx.core.module.db.*
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.CourseNotifier
+import org.openedx.core.system.notifier.CourseStructureUpdated
+import org.openedx.course.domain.interactor.CourseInteractor
+import org.openedx.course.presentation.CourseAnalytics
 import java.net.UnknownHostException
 import java.util.*
 
@@ -40,6 +41,7 @@ class CourseOutlineViewModelTest {
 
     private val dispatcher = UnconfinedTestDispatcher()
 
+    private val config = mockk<Config>()
     private val resourceManager = mockk<ResourceManager>()
     private val interactor = mockk<CourseInteractor>()
     private val preferencesManager = mockk<CorePreferences>()
@@ -67,6 +69,7 @@ class CourseOutlineViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("1", "id1"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -82,6 +85,7 @@ class CourseOutlineViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("id2"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -97,6 +101,7 @@ class CourseOutlineViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = emptyList(),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         )
     )
@@ -125,6 +130,14 @@ class CourseOutlineViewModelTest {
         isSelfPaced = false
     )
 
+    private val mockCourseDatesBannerInfo = CourseDatesBannerInfo(
+        missedDeadlines = true,
+        missedGatedContent = false,
+        verifiedUpgradeLink = "",
+        contentTypeGatingEnabled = false,
+        hasEnded = true,
+    )
+
     private val downloadModel = DownloadModel(
         "id",
         "title",
@@ -142,6 +155,7 @@ class CourseOutlineViewModelTest {
         every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
         every { resourceManager.getString(org.openedx.course.R.string.course_can_download_only_with_wifi) } returns cantDownload
+        every { config.getApiHostURL() } returns "http://localhost:8000"
     }
 
     @After
@@ -157,6 +171,7 @@ class CourseOutlineViewModelTest {
 
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -185,6 +200,7 @@ class CourseOutlineViewModelTest {
         coEvery { interactor.getCourseStatus(any()) } throws Exception()
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -220,9 +236,12 @@ class CourseOutlineViewModelTest {
             )
         }
         coEvery { interactor.getCourseStatus(any()) } returns CourseComponentStatus("id")
+        every { config.isCourseNestedListEnabled() } returns false
+        coEvery { interactor.getDatesBannerInfo(any()) } returns mockCourseDatesBannerInfo
 
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -257,9 +276,11 @@ class CourseOutlineViewModelTest {
             )
         }
         coEvery { interactor.getCourseStatus(any()) } returns CourseComponentStatus("id")
+        every { config.isCourseNestedListEnabled() } returns false
 
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -294,9 +315,12 @@ class CourseOutlineViewModelTest {
             )
         }
         coEvery { interactor.getCourseStatus(any()) } returns CourseComponentStatus("id")
+        every { config.isCourseNestedListEnabled() } returns false
+        coEvery { interactor.getDatesBannerInfo(any()) } returns mockCourseDatesBannerInfo
 
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -322,6 +346,7 @@ class CourseOutlineViewModelTest {
     fun `CourseStructureUpdated notifier test`() = runTest {
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -363,9 +388,12 @@ class CourseOutlineViewModelTest {
         coEvery { workerController.saveModels(*anyVararg()) } returns Unit
         coEvery { interactor.getCourseStatus(any()) } returns CourseComponentStatus("id")
         coEvery { downloadDao.readAllData() } returns flow { emit(emptyList()) }
+        every { config.isCourseNestedListEnabled() } returns false
+        coEvery { interactor.getDatesBannerInfo(any()) } returns mockCourseDatesBannerInfo
 
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -392,9 +420,12 @@ class CourseOutlineViewModelTest {
         coEvery { downloadDao.readAllData() } returns mockk()
         coEvery { workerController.saveModels(*anyVararg()) } returns Unit
         coEvery { downloadDao.readAllData() } returns flow { emit(emptyList()) }
+        every { config.isCourseNestedListEnabled() } returns false
+        coEvery { interactor.getDatesBannerInfo(any()) } returns mockCourseDatesBannerInfo
 
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
@@ -419,9 +450,11 @@ class CourseOutlineViewModelTest {
         every { networkConnection.isOnline() } returns false
         coEvery { workerController.saveModels(*anyVararg()) } returns Unit
         coEvery { downloadDao.readAllData() } returns flow { emit(emptyList()) }
+        every { config.isCourseNestedListEnabled() } returns false
 
         val viewModel = CourseOutlineViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             notifier,
diff --git a/course/src/test/java/org/openedx/course/presentation/section/CourseSectionViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/section/CourseSectionViewModelTest.kt
index 3dba571a6..db3309093 100644
--- a/course/src/test/java/org/openedx/course/presentation/section/CourseSectionViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/section/CourseSectionViewModelTest.kt
@@ -74,6 +74,7 @@ class CourseSectionViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("1", "id1"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -89,6 +90,7 @@ class CourseSectionViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("id2"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -104,6 +106,7 @@ class CourseSectionViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = emptyList(),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         )
     )
diff --git a/course/src/test/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModelTest.kt
index 7313be328..c087a3158 100644
--- a/course/src/test/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/unit/container/CourseUnitContainerViewModelTest.kt
@@ -1,28 +1,31 @@
 package org.openedx.course.presentation.unit.container
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import org.openedx.core.BlockType
-import org.openedx.core.domain.model.Block
-import org.openedx.core.domain.model.BlockCounts
-import org.openedx.core.domain.model.CourseStructure
-import org.openedx.core.domain.model.CoursewareAccess
-import org.openedx.core.presentation.course.CourseViewMode
-import org.openedx.core.system.notifier.CourseNotifier
-import org.openedx.course.domain.interactor.CourseInteractor
-import org.openedx.course.presentation.CourseAnalytics
 import io.mockk.every
 import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.test.*
 import org.junit.After
 import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.BlockType
+import org.openedx.core.config.Config
+import org.openedx.core.domain.model.Block
+import org.openedx.core.domain.model.BlockCounts
+import org.openedx.core.domain.model.CourseStructure
+import org.openedx.core.domain.model.CoursewareAccess
+import org.openedx.core.presentation.course.CourseViewMode
+import org.openedx.core.system.notifier.CourseEvent
+import org.openedx.core.system.notifier.CourseNotifier
+import org.openedx.course.domain.interactor.CourseInteractor
+import org.openedx.course.presentation.CourseAnalytics
 import java.net.UnknownHostException
-import java.util.*
+import java.util.Date
 
 @OptIn(ExperimentalCoroutinesApi::class)
 class CourseUnitContainerViewModelTest {
@@ -32,6 +35,7 @@ class CourseUnitContainerViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
     private val interactor = mockk<CourseInteractor>()
     private val notifier = mockk<CourseNotifier>()
     private val analytics = mockk<CourseAnalytics>()
@@ -50,6 +54,7 @@ class CourseUnitContainerViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("id2", "id1"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -65,6 +70,7 @@ class CourseUnitContainerViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("id2", "id"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -80,6 +86,7 @@ class CourseUnitContainerViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = emptyList(),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -95,6 +102,7 @@ class CourseUnitContainerViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = emptyList(),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         )
 
@@ -136,7 +144,8 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `getBlocks no internet connection exception`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
 
         every { interactor.getCourseStructureFromCache() } throws UnknownHostException()
         every { interactor.getCourseStructureForVideos() } throws UnknownHostException()
@@ -149,7 +158,8 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `getBlocks unknown exception`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
 
         every { interactor.getCourseStructureFromCache() } throws UnknownHostException()
         every { interactor.getCourseStructureForVideos() } throws UnknownHostException()
@@ -162,7 +172,8 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `getBlocks unknown success`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
 
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
@@ -176,8 +187,9 @@ class CourseUnitContainerViewModelTest {
     }
 
     @Test
-    fun `setupCurrentIndex`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+    fun setupCurrentIndex() = runTest {
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
 
@@ -191,7 +203,8 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `getCurrentBlock test`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
 
@@ -207,7 +220,8 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `moveToPrevBlock null`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
 
@@ -223,23 +237,25 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `moveToPrevBlock not null`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
 
         viewModel.loadBlocks(CourseViewMode.VIDEOS)
-        viewModel.setupCurrentIndex("id3")
+        viewModel.setupCurrentIndex("id1", "id")
 
         advanceUntilIdle()
 
         verify(exactly = 0) { interactor.getCourseStructureFromCache() }
         verify(exactly = 1) { interactor.getCourseStructureForVideos() }
-        assert(viewModel.moveToPrevBlock() == null)
+        assert(viewModel.moveToPrevBlock() != null)
     }
 
     @Test
     fun `moveToNextBlock null`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
 
@@ -255,7 +271,8 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `moveToNextBlock not null`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
 
@@ -271,7 +288,8 @@ class CourseUnitContainerViewModelTest {
 
     @Test
     fun `currentIndex isLastIndex`() = runTest {
-        val viewModel = CourseUnitContainerViewModel(interactor, notifier, analytics, "")
+        every { notifier.notifier } returns MutableSharedFlow()
+        val viewModel = CourseUnitContainerViewModel(config, interactor, notifier, analytics, "")
         every { interactor.getCourseStructureFromCache() } returns courseStructure
         every { interactor.getCourseStructureForVideos() } returns courseStructure
 
diff --git a/course/src/test/java/org/openedx/course/presentation/unit/video/VideoUnitViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/unit/video/VideoUnitViewModelTest.kt
index 30a06d0c7..a77b6ae38 100644
--- a/course/src/test/java/org/openedx/course/presentation/unit/video/VideoUnitViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/unit/video/VideoUnitViewModelTest.kt
@@ -107,7 +107,7 @@ class VideoUnitViewModelTest {
             networkConnection,
             transcriptManager
         )
-        coEvery { notifier.notifier } returns flow { emit(CourseVideoPositionChanged("", 10)) }
+        coEvery { notifier.notifier } returns flow { emit(CourseVideoPositionChanged("", 10, false)) }
         val mockLifeCycleOwner: LifecycleOwner = mockk()
         val lifecycleRegistry = LifecycleRegistry(mockLifeCycleOwner)
         lifecycleRegistry.addObserver(viewModel)
diff --git a/course/src/test/java/org/openedx/course/presentation/unit/video/VideoViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/unit/video/VideoViewModelTest.kt
index e517d192a..ce1799432 100644
--- a/course/src/test/java/org/openedx/course/presentation/unit/video/VideoViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/unit/video/VideoViewModelTest.kt
@@ -15,6 +15,7 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.data.storage.CorePreferences
 
 @OptIn(ExperimentalCoroutinesApi::class)
 class VideoViewModelTest {
@@ -26,6 +27,7 @@ class VideoViewModelTest {
 
     private val courseRepository = mockk<CourseRepository>()
     private val notifier = mockk<CourseNotifier>()
+    private val preferenceManager = mockk<CorePreferences>()
 
     @Before
     fun setUp() {
@@ -39,17 +41,17 @@ class VideoViewModelTest {
 
     @Test
     fun `sendTime test`() = runTest {
-        val viewModel = VideoViewModel("", courseRepository, notifier)
-        coEvery { notifier.send(CourseVideoPositionChanged("", 0)) } returns Unit
+        val viewModel = VideoViewModel("", courseRepository, notifier, preferenceManager)
+        coEvery { notifier.send(CourseVideoPositionChanged("", 0, false)) } returns Unit
         viewModel.sendTime()
         advanceUntilIdle()
 
-        coVerify(exactly = 1) { notifier.send(CourseVideoPositionChanged("", 0)) }
+        coVerify(exactly = 1) { notifier.send(CourseVideoPositionChanged("", 0, false)) }
     }
 
     @Test
     fun `markBlockCompleted exception`() = runTest {
-        val viewModel = VideoViewModel("", courseRepository, notifier)
+        val viewModel = VideoViewModel("", courseRepository, notifier, preferenceManager)
         coEvery {
             courseRepository.markBlocksCompletion(
                 any(),
@@ -69,7 +71,7 @@ class VideoViewModelTest {
 
     @Test
     fun `markBlockCompleted success`() = runTest {
-        val viewModel = VideoViewModel("", courseRepository, notifier)
+        val viewModel = VideoViewModel("", courseRepository, notifier, preferenceManager)
         coEvery {
             courseRepository.markBlocksCompletion(
                 any(),
diff --git a/course/src/test/java/org/openedx/course/presentation/videos/CourseVideoViewModelTest.kt b/course/src/test/java/org/openedx/course/presentation/videos/CourseVideoViewModelTest.kt
index c0f8b652c..9057df980 100644
--- a/course/src/test/java/org/openedx/course/presentation/videos/CourseVideoViewModelTest.kt
+++ b/course/src/test/java/org/openedx/course/presentation/videos/CourseVideoViewModelTest.kt
@@ -4,7 +4,20 @@ import androidx.arch.core.executor.testing.InstantTaskExecutorRule
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LifecycleRegistry
+import io.mockk.*
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.flow
+import kotlinx.coroutines.test.*
+import org.junit.After
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+import org.junit.rules.TestRule
 import org.openedx.core.BlockType
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.Block
 import org.openedx.core.domain.model.BlockCounts
 import org.openedx.core.domain.model.CourseStructure
@@ -18,18 +31,7 @@ import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.core.system.notifier.CourseStructureUpdated
 import org.openedx.course.R
 import org.openedx.course.domain.interactor.CourseInteractor
-import io.mockk.*
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.ExperimentalCoroutinesApi
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.flow.flow
-import kotlinx.coroutines.test.*
-import org.junit.After
-import org.junit.Before
-import org.junit.Rule
-import org.junit.Test
-import org.junit.rules.TestRule
-import org.openedx.core.data.storage.CorePreferences
+import org.openedx.course.presentation.CourseAnalytics
 import java.util.*
 
 @OptIn(ExperimentalCoroutinesApi::class)
@@ -39,9 +41,11 @@ class CourseVideoViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
     private val resourceManager = mockk<ResourceManager>()
     private val interactor = mockk<CourseInteractor>()
     private val notifier = spyk<CourseNotifier>()
+    private val analytics = mockk<CourseAnalytics>()
     private val preferencesManager = mockk<CorePreferences>()
     private val networkConnection = mockk<NetworkConnection>()
     private val downloadDao = mockk<DownloadDao>()
@@ -63,6 +67,7 @@ class CourseVideoViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("1", "id1"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -78,6 +83,7 @@ class CourseVideoViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = listOf("id2"),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         ),
         Block(
@@ -93,6 +99,7 @@ class CourseVideoViewModelTest {
             studentViewMultiDevice = false,
             blockCounts = BlockCounts(0),
             descendants = emptyList(),
+            descendantsType = BlockType.HTML,
             completion = 0.0
         )
     )
@@ -130,6 +137,7 @@ class CourseVideoViewModelTest {
         every { resourceManager.getString(R.string.course_does_not_include_videos) } returns ""
         every { resourceManager.getString(org.openedx.course.R.string.course_can_download_only_with_wifi) } returns cantDownload
         Dispatchers.setMain(dispatcher)
+        every { config.getApiHostURL() } returns "http://localhost:8000"
     }
 
     @After
@@ -139,16 +147,19 @@ class CourseVideoViewModelTest {
 
     @Test
     fun `getVideos empty list`() = runTest {
+        every { config.isCourseNestedListEnabled() } returns false
         every { interactor.getCourseStructureForVideos() } returns courseStructure.copy(blockData = emptyList())
         every { downloadDao.readAllData() } returns flow { emit(emptyList()) }
 
         val viewModel = CourseVideoViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             networkConnection,
             preferencesManager,
             notifier,
+            analytics,
             downloadDao,
             workerController
         )
@@ -163,15 +174,18 @@ class CourseVideoViewModelTest {
 
     @Test
     fun `getVideos success`() = runTest {
+        every { config.isCourseNestedListEnabled() } returns false
         every { interactor.getCourseStructureForVideos() } returns courseStructure
         every { downloadDao.readAllData() } returns flow { emit(emptyList()) }
         val viewModel = CourseVideoViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             networkConnection,
             preferencesManager,
             notifier,
+            analytics,
             downloadDao,
             workerController
         )
@@ -187,6 +201,7 @@ class CourseVideoViewModelTest {
 
     @Test
     fun `updateVideos success`() = runTest {
+        every { config.isCourseNestedListEnabled() } returns false
         every { interactor.getCourseStructureForVideos() } returns courseStructure
         coEvery { notifier.notifier } returns flow { emit(CourseStructureUpdated("", false)) }
         every { downloadDao.readAllData() } returns flow {
@@ -197,11 +212,13 @@ class CourseVideoViewModelTest {
         }
         val viewModel = CourseVideoViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             networkConnection,
             preferencesManager,
             notifier,
+            analytics,
             downloadDao,
             workerController
         )
@@ -221,13 +238,16 @@ class CourseVideoViewModelTest {
 
     @Test
     fun `setIsUpdating success`() = runTest {
+        every { config.isCourseNestedListEnabled() } returns false
         val viewModel = CourseVideoViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             networkConnection,
             preferencesManager,
             notifier,
+            analytics,
             downloadDao,
             workerController
         )
@@ -241,13 +261,16 @@ class CourseVideoViewModelTest {
 
     @Test
     fun `saveDownloadModels test`() = runTest {
+        every { config.isCourseNestedListEnabled() } returns false
         val viewModel = CourseVideoViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             networkConnection,
             preferencesManager,
             notifier,
+            analytics,
             downloadDao,
             workerController
         )
@@ -265,13 +288,16 @@ class CourseVideoViewModelTest {
 
     @Test
     fun `saveDownloadModels only wifi download, with connection`() = runTest {
+        every { config.isCourseNestedListEnabled() } returns false
         val viewModel = CourseVideoViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             networkConnection,
             preferencesManager,
             notifier,
+            analytics,
             downloadDao,
             workerController
         )
@@ -289,13 +315,16 @@ class CourseVideoViewModelTest {
 
     @Test
     fun `saveDownloadModels only wifi download, without conection`() = runTest {
+        every { config.isCourseNestedListEnabled() } returns false
         val viewModel = CourseVideoViewModel(
             "",
+            config,
             interactor,
             resourceManager,
             networkConnection,
             preferencesManager,
             notifier,
+            analytics,
             downloadDao,
             workerController
         )
diff --git a/dashboard/src/androidTest/java/org/openedx/dashboard/presentation/MyCoursesScreenTest.kt b/dashboard/src/androidTest/java/org/openedx/dashboard/presentation/MyCoursesScreenTest.kt
index cf6c3a845..9e83411f5 100644
--- a/dashboard/src/androidTest/java/org/openedx/dashboard/presentation/MyCoursesScreenTest.kt
+++ b/dashboard/src/androidTest/java/org/openedx/dashboard/presentation/MyCoursesScreenTest.kt
@@ -2,13 +2,25 @@ package org.openedx.dashboard.presentation
 
 import androidx.activity.ComponentActivity
 import androidx.compose.ui.semantics.ProgressBarRangeInfo
-import androidx.compose.ui.test.*
+import androidx.compose.ui.test.assertAny
+import androidx.compose.ui.test.hasAnyChild
+import androidx.compose.ui.test.hasProgressBarRangeInfo
+import androidx.compose.ui.test.hasScrollAction
+import androidx.compose.ui.test.hasText
 import androidx.compose.ui.test.junit4.createAndroidComposeRule
-import org.openedx.core.domain.model.*
-import org.openedx.core.ui.WindowSize
-import org.openedx.core.ui.WindowType
+import androidx.compose.ui.test.onChildren
 import org.junit.Rule
 import org.junit.Test
+import org.openedx.core.AppUpdateState
+import org.openedx.core.domain.model.Certificate
+import org.openedx.core.domain.model.CourseSharingUtmParameters
+import org.openedx.core.domain.model.CoursewareAccess
+import org.openedx.core.domain.model.EnrolledCourse
+import org.openedx.core.domain.model.EnrolledCourseData
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.dashboard.presentation.dashboard.DashboardUIState
+import org.openedx.dashboard.presentation.dashboard.MyCoursesScreen
 import java.util.Date
 
 class MyCoursesScreenTest {
@@ -60,15 +72,17 @@ class MyCoursesScreenTest {
         composeTestRule.setContent {
             MyCoursesScreen(
                 windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-                DashboardUIState.Loading,
-                null,
+                apiHostUrl = "http://localhost:8000",
+                state = DashboardUIState.Courses(listOf(mockCourseEnrolled, mockCourseEnrolled)),
+                uiMessage = null,
                 refreshing = false,
                 canLoadMore = false,
                 hasInternetConnection = true,
                 onReloadClick = {},
                 onSwipeRefresh = {},
                 paginationCallback = {},
-                onItemClick = {}
+                onItemClick = {},
+                appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
             )
         }
 
@@ -90,15 +104,17 @@ class MyCoursesScreenTest {
         composeTestRule.setContent {
             MyCoursesScreen(
                 windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-                DashboardUIState.Courses(listOf(mockCourseEnrolled, mockCourseEnrolled)),
-                null,
+                apiHostUrl = "http://localhost:8000",
+                state = DashboardUIState.Courses(listOf(mockCourseEnrolled, mockCourseEnrolled)),
+                uiMessage = null,
                 refreshing = false,
                 canLoadMore = false,
                 hasInternetConnection = true,
                 onReloadClick = {},
                 onSwipeRefresh = {},
                 paginationCallback = {},
-                onItemClick = {}
+                onItemClick = {},
+                appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
             )
         }
 
@@ -113,15 +129,17 @@ class MyCoursesScreenTest {
         composeTestRule.setContent {
             MyCoursesScreen(
                 windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-                DashboardUIState.Courses(listOf(mockCourseEnrolled, mockCourseEnrolled)),
-                null,
+                apiHostUrl = "http://localhost:8000",
+                state = DashboardUIState.Courses(listOf(mockCourseEnrolled, mockCourseEnrolled)),
+                uiMessage = null,
                 refreshing = true,
                 canLoadMore = false,
                 hasInternetConnection = true,
                 onReloadClick = {},
                 onSwipeRefresh = {},
                 paginationCallback = {},
-                onItemClick = {}
+                onItemClick = {},
+                appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
             )
         }
 
diff --git a/dashboard/src/main/java/org/openedx/dashboard/data/repository/DashboardRepository.kt b/dashboard/src/main/java/org/openedx/dashboard/data/repository/DashboardRepository.kt
index b43624364..72cb9f380 100644
--- a/dashboard/src/main/java/org/openedx/dashboard/data/repository/DashboardRepository.kt
+++ b/dashboard/src/main/java/org/openedx/dashboard/data/repository/DashboardRepository.kt
@@ -19,8 +19,8 @@ class DashboardRepository(
             page = page
         )
         if (page == 1) dao.clearCachedData()
-        dao.insertEnrolledCourseEntity(*result.results.map { it.mapToRoomEntity() }.toTypedArray())
-        return result.mapToDomain()
+        dao.insertEnrolledCourseEntity(*result.enrollments.results.map { it.mapToRoomEntity() }.toTypedArray())
+        return result.enrollments.mapToDomain()
     }
 
     suspend fun getEnrolledCoursesFromCache(): List<EnrolledCourse> {
diff --git a/dashboard/src/main/java/org/openedx/dashboard/notifier/DashboardEvent.kt b/dashboard/src/main/java/org/openedx/dashboard/notifier/DashboardEvent.kt
new file mode 100644
index 000000000..db6532218
--- /dev/null
+++ b/dashboard/src/main/java/org/openedx/dashboard/notifier/DashboardEvent.kt
@@ -0,0 +1,6 @@
+package org.openedx.dashboard.notifier
+
+sealed class DashboardEvent {
+    object NavigationToDiscovery : DashboardEvent()
+    object UpdateEnrolledCourses : DashboardEvent()
+}
diff --git a/dashboard/src/main/java/org/openedx/dashboard/notifier/DashboardNotifier.kt b/dashboard/src/main/java/org/openedx/dashboard/notifier/DashboardNotifier.kt
new file mode 100644
index 000000000..5e3fa6e22
--- /dev/null
+++ b/dashboard/src/main/java/org/openedx/dashboard/notifier/DashboardNotifier.kt
@@ -0,0 +1,19 @@
+package org.openedx.dashboard.notifier
+
+import kotlinx.coroutines.channels.BufferOverflow
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+
+class DashboardNotifier {
+
+    private val channel = MutableSharedFlow<DashboardEvent>(
+        replay = 0,
+        extraBufferCapacity = 1,
+        onBufferOverflow = BufferOverflow.DROP_OLDEST
+    )
+
+    val notifier: Flow<DashboardEvent> = channel.asSharedFlow()
+
+    suspend fun send(event: DashboardEvent) = channel.emit(event)
+}
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardRouter.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardRouter.kt
index 42d229330..83ba221e2 100644
--- a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardRouter.kt
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardRouter.kt
@@ -10,4 +10,11 @@ interface DashboardRouter {
         courseTitle: String
     )
 
-}
\ No newline at end of file
+    fun navigateToProgramInfo(
+        fm: FragmentManager,
+        pathId: String,
+
+    )
+
+    fun navigateToCourseInfo(fm: FragmentManager, courseId: String, infoType: String)
+}
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardAnalytics.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardAnalytics.kt
similarity index 67%
rename from dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardAnalytics.kt
rename to dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardAnalytics.kt
index 6a69e7a65..a0ce2285e 100644
--- a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardAnalytics.kt
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardAnalytics.kt
@@ -1,4 +1,4 @@
-package org.openedx.dashboard.presentation
+package org.openedx.dashboard.presentation.dashboard
 
 interface DashboardAnalytics {
     fun dashboardCourseClickedEvent(courseId: String, courseName: String)
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardFragment.kt
similarity index 85%
rename from dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt
rename to dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardFragment.kt
index 45a81e378..849423409 100644
--- a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardFragment.kt
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardFragment.kt
@@ -1,4 +1,4 @@
-package org.openedx.dashboard.presentation
+package org.openedx.dashboard.presentation.dashboard
 
 import android.content.res.Configuration.UI_MODE_NIGHT_NO
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
@@ -39,18 +39,30 @@ import androidx.compose.ui.unit.dp
 import androidx.fragment.app.Fragment
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
-import org.openedx.core.BuildConfig
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.core.AppUpdateState
 import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.*
-import org.openedx.core.ui.*
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRecommendedBox
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.OfflineModeDialog
+import org.openedx.core.ui.Toolbar
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.shouldLoadMore
+import org.openedx.core.ui.statusBarsInset
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
 import org.openedx.core.utils.TimeUtils
 import org.openedx.dashboard.R
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.dashboard.presentation.DashboardRouter
 import java.util.*
 
 class DashboardFragment : Fragment() {
@@ -76,9 +88,11 @@ class DashboardFragment : Fragment() {
                 val uiMessage by viewModel.uiMessage.observeAsState()
                 val refreshing by viewModel.updating.observeAsState(false)
                 val canLoadMore by viewModel.canLoadMore.observeAsState(false)
+                val appUpgradeEvent by viewModel.appUpgradeEvent.observeAsState()
 
                 MyCoursesScreen(
                     windowSize = windowSize,
+                    viewModel.apiHostUrl,
                     uiState!!,
                     uiMessage,
                     canLoadMore = canLoadMore,
@@ -100,7 +114,13 @@ class DashboardFragment : Fragment() {
                     },
                     paginationCallback = {
                         viewModel.fetchMore()
-                    }
+                    },
+                    appUpgradeParameters = AppUpdateState.AppUpgradeParameters(
+                        appUpgradeEvent = appUpgradeEvent,
+                        onAppUpgradeRecommendedBoxClick = {
+                            AppUpdateState.openPlayMarket(requireContext())
+                        },
+                    ),
                 )
             }
         }
@@ -111,6 +131,7 @@ class DashboardFragment : Fragment() {
 @Composable
 internal fun MyCoursesScreen(
     windowSize: WindowSize,
+    apiHostUrl: String,
     state: DashboardUIState,
     uiMessage: UIMessage?,
     canLoadMore: Boolean,
@@ -120,6 +141,7 @@ internal fun MyCoursesScreen(
     onSwipeRefresh: () -> Unit,
     paginationCallback: () -> Unit,
     onItemClick: (EnrolledCourse) -> Unit,
+    appUpgradeParameters: AppUpdateState.AppUpgradeParameters,
 ) {
     val scaffoldState = rememberScaffoldState()
     val pullRefreshState =
@@ -177,18 +199,11 @@ internal fun MyCoursesScreen(
         Column(
             modifier = Modifier
                 .padding(paddingValues)
-                .statusBarsInset(),
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            Text(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 10.dp, bottom = 12.dp),
-                text = stringResource(id = R.string.dashboard_title),
-                color = MaterialTheme.appColors.textPrimary,
-                style = MaterialTheme.appTypography.titleMedium,
-                textAlign = TextAlign.Center
-            )
+            Toolbar(label = stringResource(id = R.string.dashboard_title))
 
             Surface(
                 color = MaterialTheme.appColors.background,
@@ -238,9 +253,11 @@ internal fun MyCoursesScreen(
                                             }
                                         }
                                         items(state.courses) { course ->
-                                            CourseItem(course, windowSize, onClick = {
-                                                onItemClick(it)
-                                            })
+                                            CourseItem(
+                                                apiHostUrl,
+                                                course,
+                                                windowSize,
+                                                onClick = { onItemClick(it) })
                                             Divider()
                                         }
                                         item {
@@ -294,19 +311,35 @@ internal fun MyCoursesScreen(
                         pullRefreshState,
                         Modifier.align(Alignment.TopCenter)
                     )
-                    if (!isInternetConnectionShown && !hasInternetConnection) {
-                        OfflineModeDialog(
-                            Modifier
-                                .fillMaxWidth()
-                                .align(Alignment.BottomCenter),
-                            onDismissCLick = {
-                                isInternetConnectionShown = true
-                            },
-                            onReloadClick = {
-                                isInternetConnectionShown = true
-                                onReloadClick()
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .align(Alignment.BottomCenter)
+                    ) {
+                        when (appUpgradeParameters.appUpgradeEvent) {
+                            is AppUpgradeEvent.UpgradeRecommendedEvent -> {
+                                AppUpgradeRecommendedBox(
+                                    modifier = Modifier.fillMaxWidth(),
+                                    onClick = appUpgradeParameters.onAppUpgradeRecommendedBoxClick
+                                )
                             }
-                        )
+
+                            else -> {}
+                        }
+
+                        if (!isInternetConnectionShown && !hasInternetConnection) {
+                            OfflineModeDialog(
+                                Modifier
+                                    .fillMaxWidth(),
+                                onDismissCLick = {
+                                    isInternetConnectionShown = true
+                                },
+                                onReloadClick = {
+                                    isInternetConnectionShown = true
+                                    onReloadClick()
+                                }
+                            )
+                        }
                     }
                 }
             }
@@ -316,6 +349,7 @@ internal fun MyCoursesScreen(
 
 @Composable
 private fun CourseItem(
+    apiHostUrl: String,
     enrolledCourse: EnrolledCourse,
     windowSize: WindowSize,
     onClick: (EnrolledCourse) -> Unit
@@ -328,7 +362,7 @@ private fun CourseItem(
             )
         )
     }
-    val imageUrl = org.openedx.core.BuildConfig.BASE_URL.dropLast(1) + enrolledCourse.course.courseImage
+    val imageUrl = apiHostUrl.dropLast(1) + enrolledCourse.course.courseImage
     val context = LocalContext.current
     Surface(
         modifier = Modifier
@@ -464,6 +498,7 @@ private fun EmptyState() {
 private fun CourseItemPreview() {
     OpenEdXTheme() {
         CourseItem(
+            "http://localhost:8000",
             mockCourseEnrolled,
             WindowSize(WindowType.Compact, WindowType.Compact),
             onClick = {})
@@ -477,6 +512,7 @@ private fun MyCoursesScreenDay() {
     OpenEdXTheme {
         MyCoursesScreen(
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            apiHostUrl = "http://localhost:8000",
             state = DashboardUIState.Courses(
                 listOf(
                     mockCourseEnrolled,
@@ -494,7 +530,8 @@ private fun MyCoursesScreenDay() {
             hasInternetConnection = true,
             refreshing = false,
             canLoadMore = false,
-            paginationCallback = {}
+            paginationCallback = {},
+            appUpgradeParameters = AppUpdateState.AppUpgradeParameters()
         )
     }
 }
@@ -506,6 +543,7 @@ private fun MyCoursesScreenTabletPreview() {
     OpenEdXTheme {
         MyCoursesScreen(
             windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
+            apiHostUrl = "http://localhost:8000",
             state = DashboardUIState.Courses(
                 listOf(
                     mockCourseEnrolled,
@@ -523,7 +561,8 @@ private fun MyCoursesScreenTabletPreview() {
             hasInternetConnection = true,
             refreshing = false,
             canLoadMore = false,
-            paginationCallback = {}
+            paginationCallback = {},
+            appUpgradeParameters = AppUpdateState.AppUpgradeParameters()
         )
     }
 }
@@ -563,4 +602,4 @@ private val mockCourseEnrolled = EnrolledCourse(
         videoOutline = "",
         isSelfPaced = false
     )
-)
\ No newline at end of file
+)
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardUIState.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardUIState.kt
similarity index 82%
rename from dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardUIState.kt
rename to dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardUIState.kt
index 5ea81cfd0..b0c5b1daa 100644
--- a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardUIState.kt
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardUIState.kt
@@ -1,4 +1,4 @@
-package org.openedx.dashboard.presentation
+package org.openedx.dashboard.presentation.dashboard
 
 import org.openedx.core.domain.model.EnrolledCourse
 
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardViewModel.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardViewModel.kt
similarity index 79%
rename from dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardViewModel.kt
rename to dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardViewModel.kt
index 714d0c91e..9316d831f 100644
--- a/dashboard/src/main/java/org/openedx/dashboard/presentation/DashboardViewModel.kt
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/dashboard/DashboardViewModel.kt
@@ -1,34 +1,48 @@
-package org.openedx.dashboard.presentation
+package org.openedx.dashboard.presentation.dashboard
 
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.onEach
+import kotlinx.coroutines.launch
 import org.openedx.core.BaseViewModel
 import org.openedx.core.R
 import org.openedx.core.SingleEventLiveData
 import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
 import org.openedx.core.domain.model.EnrolledCourse
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.ResourceManager
 import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.system.notifier.AppUpgradeNotifier
 import org.openedx.core.system.notifier.CourseDashboardUpdate
 import org.openedx.core.system.notifier.CourseNotifier
 import org.openedx.dashboard.domain.interactor.DashboardInteractor
-import kotlinx.coroutines.launch
+import org.openedx.dashboard.notifier.DashboardEvent
+import org.openedx.dashboard.notifier.DashboardNotifier
 
 
 class DashboardViewModel(
+    private val config: Config,
     private val networkConnection: NetworkConnection,
     private val interactor: DashboardInteractor,
     private val resourceManager: ResourceManager,
-    private val notifier: CourseNotifier,
-    private val analytics: DashboardAnalytics
+    private val courseNotifier: CourseNotifier,
+    private val dashboardNotifier: DashboardNotifier,
+    private val analytics: DashboardAnalytics,
+    private val appUpgradeNotifier: AppUpgradeNotifier
 ) : BaseViewModel() {
 
     private val coursesList = mutableListOf<EnrolledCourse>()
     private var page = 1
     private var isLoading = false
+
+    val apiHostUrl get() = config.getApiHostURL()
+
     private val _uiState = MutableLiveData<DashboardUIState>(DashboardUIState.Loading)
     val uiState: LiveData<DashboardUIState>
         get() = _uiState
@@ -48,19 +62,29 @@ class DashboardViewModel(
     val canLoadMore: LiveData<Boolean>
         get() = _canLoadMore
 
+    private val _appUpgradeEvent = MutableLiveData<AppUpgradeEvent>()
+    val appUpgradeEvent: LiveData<AppUpgradeEvent>
+        get() = _appUpgradeEvent
+
     override fun onCreate(owner: LifecycleOwner) {
         super.onCreate(owner)
         viewModelScope.launch {
-            notifier.notifier.collect {
+            courseNotifier.notifier.collect {
                 if (it is CourseDashboardUpdate) {
                     updateCourses()
                 }
             }
         }
+        dashboardNotifier.notifier.onEach {
+            if (it is DashboardEvent.UpdateEnrolledCourses) {
+                updateCourses()
+            }
+        }.distinctUntilChanged().launchIn(viewModelScope)
     }
 
     init {
         getCourses()
+        collectAppUpgradeEvent()
     }
 
     fun getCourses() {
@@ -113,7 +137,7 @@ class DashboardViewModel(
                 } else {
                     null
                 }
-                if (response !=null) {
+                if (response != null) {
                     if (response.pagination.next.isNotEmpty() && page != response.pagination.numPages) {
                         _canLoadMore.value = true
                         page++
@@ -153,6 +177,14 @@ class DashboardViewModel(
         }
     }
 
+    private fun collectAppUpgradeEvent() {
+        viewModelScope.launch {
+            appUpgradeNotifier.notifier.collect { event ->
+                _appUpgradeEvent.value = event
+            }
+        }
+    }
+
     fun dashboardCourseClickedEvent(courseId: String, courseName: String) {
         analytics.dashboardCourseClickedEvent(courseId, courseName)
     }
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramFragment.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramFragment.kt
new file mode 100644
index 000000000..00da95a6e
--- /dev/null
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramFragment.kt
@@ -0,0 +1,339 @@
+package org.openedx.dashboard.presentation.program
+
+import android.content.res.Configuration
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.compose.ui.zIndex
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.core.extension.toastMessage
+import org.openedx.core.presentation.catalog.CatalogWebViewScreen
+import org.openedx.core.presentation.catalog.WebViewLink
+import org.openedx.core.presentation.dialog.alert.ActionDialogFragment
+import org.openedx.core.presentation.dialog.alert.InfoDialogFragment
+import org.openedx.core.ui.ConnectionErrorView
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.Toolbar
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.dashboard.R
+import org.openedx.core.R as coreR
+import org.openedx.core.presentation.catalog.WebViewLink.Authority as linkAuthority
+
+class ProgramFragment(private val myPrograms: Boolean = false) : Fragment() {
+
+    private val viewModel by viewModel<ProgramViewModel>()
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        if (myPrograms.not()) {
+            lifecycle.addObserver(viewModel)
+        }
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val windowSize = rememberWindowSize()
+                val uiState by viewModel.uiState.collectAsState(initial = ProgramUIState.Loading)
+                var hasInternetConnection by remember {
+                    mutableStateOf(viewModel.hasInternetConnection)
+                }
+
+                if (myPrograms.not()) {
+                    DisposableEffect(uiState is ProgramUIState.CourseEnrolled) {
+                        if (uiState is ProgramUIState.CourseEnrolled) {
+
+                            val courseId = (uiState as ProgramUIState.CourseEnrolled).courseId
+                            val isEnrolled = (uiState as ProgramUIState.CourseEnrolled).isEnrolled
+
+                            if (isEnrolled) {
+                                viewModel.onEnrolledCourseClick(
+                                    fragmentManager = requireActivity().supportFragmentManager,
+                                    courseId = courseId,
+                                )
+                                context.toastMessage(getString(R.string.dashboard_enrolled_successfully))
+                            } else {
+                                InfoDialogFragment.newInstance(
+                                    title = getString(coreR.string.core_enrollment_error),
+                                    message = getString(coreR.string.core_enrollment_error_message)
+                                ).show(
+                                    requireActivity().supportFragmentManager,
+                                    InfoDialogFragment::class.simpleName
+                                )
+                            }
+                        }
+                        onDispose {}
+                    }
+                }
+
+                ProgramInfoScreen(
+                    windowSize = windowSize,
+                    uiState = uiState,
+                    contentUrl = getInitialUrl(),
+                    canShowBackBtn = arguments?.getString(ARG_PATH_ID, "")
+                        ?.isNotEmpty() == true,
+                    uriScheme = viewModel.uriScheme,
+                    hasInternetConnection = hasInternetConnection,
+                    checkInternetConnection = {
+                        hasInternetConnection = viewModel.hasInternetConnection
+                    },
+                    onWebPageLoaded = { viewModel.showLoading(false) },
+                    onBackClick = {
+                        requireActivity().supportFragmentManager.popBackStackImmediate()
+                    },
+                    onUriClick = { param, type ->
+                        when (type) {
+                            linkAuthority.ENROLLED_COURSE_INFO -> {
+                                viewModel.onEnrolledCourseClick(
+                                    fragmentManager = requireActivity().supportFragmentManager,
+                                    courseId = param
+                                )
+                            }
+
+                            linkAuthority.ENROLLED_PROGRAM_INFO -> {
+                                viewModel.onProgramCardClick(
+                                    fragmentManager = requireActivity().supportFragmentManager,
+                                    pathId = param
+                                )
+                            }
+
+                            linkAuthority.PROGRAM_INFO,
+                            linkAuthority.COURSE_INFO -> {
+                                viewModel.onViewCourseClick(
+                                    fragmentManager = requireActivity().supportFragmentManager,
+                                    courseId = param,
+                                    infoType = type.name
+                                )
+                            }
+
+                            linkAuthority.ENROLL -> {
+                                viewModel.enrollInACourse(param)
+                            }
+
+                            linkAuthority.COURSE -> {
+                                viewModel.navigateToDiscovery()
+                            }
+
+                            linkAuthority.EXTERNAL -> {
+                                ActionDialogFragment.newInstance(
+                                    title = getString(coreR.string.core_leaving_the_app),
+                                    message = getString(
+                                        coreR.string.core_leaving_the_app_message,
+                                        getString(coreR.string.platform_name)
+                                    ),
+                                    url = param,
+                                ).show(
+                                    requireActivity().supportFragmentManager,
+                                    ActionDialogFragment::class.simpleName
+                                )
+                            }
+
+                            else -> {}
+                        }
+                    },
+                    refreshSessionCookie = {
+                        viewModel.refreshCookie()
+                    },
+                )
+            }
+        }
+    }
+
+
+    private fun getInitialUrl(): String {
+        return arguments?.let { args ->
+            val pathId = args.getString(ARG_PATH_ID) ?: ""
+            viewModel.programConfig.programDetailUrlTemplate.replace("{$ARG_PATH_ID}", pathId)
+        } ?: viewModel.programConfig.programUrl
+    }
+
+    companion object {
+        private const val ARG_PATH_ID = "path_id"
+
+        fun newInstance(
+            pathId: String,
+        ): ProgramFragment {
+            val fragment = ProgramFragment(false)
+            fragment.arguments = bundleOf(
+                ARG_PATH_ID to pathId,
+            )
+            return fragment
+        }
+    }
+}
+
+@Composable
+private fun ProgramInfoScreen(
+    windowSize: WindowSize,
+    uiState: ProgramUIState?,
+    contentUrl: String,
+    uriScheme: String,
+    canShowBackBtn: Boolean,
+    hasInternetConnection: Boolean,
+    checkInternetConnection: () -> Unit,
+    onWebPageLoaded: () -> Unit,
+    onBackClick: () -> Unit,
+    onUriClick: (String, WebViewLink.Authority) -> Unit,
+    refreshSessionCookie: () -> Unit = {},
+) {
+    val scaffoldState = rememberScaffoldState()
+    val configuration = LocalConfiguration.current
+    val isLoading = uiState is ProgramUIState.Loading
+
+    when (uiState) {
+        is ProgramUIState.UiMessage -> {
+            HandleUIMessage(uiMessage = uiState.uiMessage, scaffoldState = scaffoldState)
+        }
+
+        else -> {}
+    }
+
+    Scaffold(
+        scaffoldState = scaffoldState,
+        modifier = Modifier.fillMaxSize(),
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+        val modifierScreenWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
+                        Modifier.widthIn(Dp.Unspecified, 560.dp)
+                    } else {
+                        Modifier.widthIn(Dp.Unspecified, 650.dp)
+                    },
+                    compact = Modifier.fillMaxWidth()
+                )
+            )
+        }
+
+        Column(
+            modifier = modifierScreenWidth
+                .fillMaxSize()
+                .padding(it)
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Toolbar(
+                label = stringResource(id = R.string.dashboard_programs),
+                canShowBackBtn = canShowBackBtn,
+                onBackClick = onBackClick
+            )
+
+            Surface {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(Color.White),
+                    contentAlignment = Alignment.TopCenter
+                ) {
+                    if (hasInternetConnection) {
+                        val webView = CatalogWebViewScreen(
+                            url = contentUrl,
+                            uriScheme = uriScheme,
+                            isAllLinksExternal = true,
+                            onWebPageLoaded = onWebPageLoaded,
+                            refreshSessionCookie = refreshSessionCookie,
+                            onUriClick = onUriClick,
+                        )
+
+                        AndroidView(
+                            modifier = Modifier
+                                .background(MaterialTheme.appColors.background),
+                            factory = {
+                                webView
+                            },
+                            update = {
+                                webView.loadUrl(contentUrl)
+                            }
+                        )
+                    } else {
+                        ConnectionErrorView(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .fillMaxHeight()
+                                .background(MaterialTheme.appColors.background)
+                        ) {
+                            checkInternetConnection()
+                        }
+                    }
+                    if (isLoading && hasInternetConnection) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .zIndex(1f),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+fun MyProgramsPreview() {
+    OpenEdXTheme {
+        ProgramInfoScreen(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            uiState = ProgramUIState.Loading,
+            contentUrl = "https://www.example.com/",
+            uriScheme = "",
+            canShowBackBtn = false,
+            hasInternetConnection = false,
+            checkInternetConnection = {},
+            onBackClick = {},
+            onWebPageLoaded = {},
+            onUriClick = { _, _ -> },
+        )
+    }
+}
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramUIState.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramUIState.kt
new file mode 100644
index 000000000..8f9b83c5c
--- /dev/null
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramUIState.kt
@@ -0,0 +1,12 @@
+package org.openedx.dashboard.presentation.program
+
+import org.openedx.core.UIMessage
+
+sealed class ProgramUIState {
+    object Loading : ProgramUIState()
+    object Loaded : ProgramUIState()
+
+    class CourseEnrolled(val courseId: String, val isEnrolled: Boolean) : ProgramUIState()
+
+    class UiMessage(val uiMessage: UIMessage) : ProgramUIState()
+}
diff --git a/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramViewModel.kt b/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramViewModel.kt
new file mode 100644
index 000000000..da5453fdf
--- /dev/null
+++ b/dashboard/src/main/java/org/openedx/dashboard/presentation/program/ProgramViewModel.kt
@@ -0,0 +1,105 @@
+package org.openedx.dashboard.presentation.program
+
+import androidx.fragment.app.FragmentManager
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.channels.BufferOverflow
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.SharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.launch
+import org.openedx.core.BaseViewModel
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.extension.isInternetError
+import org.openedx.core.interfaces.EnrollInCourseInteractor
+import org.openedx.core.system.AppCookieManager
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.dashboard.notifier.DashboardEvent
+import org.openedx.dashboard.notifier.DashboardNotifier
+import org.openedx.dashboard.presentation.DashboardRouter
+
+class ProgramViewModel(
+    private val config: Config,
+    private val networkConnection: NetworkConnection,
+    private val router: DashboardRouter,
+    private val notifier: DashboardNotifier,
+    private val edxCookieManager: AppCookieManager,
+    private val resourceManager: ResourceManager,
+    private val courseInteractor: EnrollInCourseInteractor
+) : BaseViewModel() {
+    val uriScheme: String get() = config.getUriScheme()
+
+    val programConfig get() = config.getProgramConfig().webViewConfig
+
+    val hasInternetConnection: Boolean get() = networkConnection.isOnline()
+
+    private val _uiState = MutableSharedFlow<ProgramUIState>(
+        replay = 0,
+        extraBufferCapacity = 1,
+        onBufferOverflow = BufferOverflow.DROP_OLDEST
+    )
+    val uiState: SharedFlow<ProgramUIState> get() = _uiState.asSharedFlow()
+
+    fun showLoading(isLoading: Boolean) {
+        viewModelScope.launch {
+            _uiState.emit(if (isLoading) ProgramUIState.Loading else ProgramUIState.Loaded)
+        }
+    }
+
+    fun enrollInACourse(courseId: String) {
+        showLoading(true)
+        viewModelScope.launch {
+            try {
+                courseInteractor.enrollInACourse(courseId)
+                _uiState.emit(ProgramUIState.CourseEnrolled(courseId, true))
+                notifier.send(DashboardEvent.UpdateEnrolledCourses)
+            } catch (e: Exception) {
+                if (e.isInternetError()) {
+                    _uiState.emit(
+                        ProgramUIState.UiMessage(
+                            UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_no_connection))
+                        )
+                    )
+                } else {
+                    _uiState.emit(ProgramUIState.CourseEnrolled(courseId, false))
+                }
+            }
+        }
+    }
+
+    fun onProgramCardClick(fragmentManager: FragmentManager, pathId: String) {
+        if (pathId.isNotEmpty()) {
+            router.navigateToProgramInfo(fm = fragmentManager, pathId = pathId)
+        }
+    }
+
+    fun onViewCourseClick(fragmentManager: FragmentManager, courseId: String, infoType: String) {
+        if (courseId.isNotEmpty() && infoType.isNotEmpty()) {
+            router.navigateToCourseInfo(
+                fm = fragmentManager,
+                courseId = courseId,
+                infoType = infoType
+            )
+        }
+    }
+
+    fun onEnrolledCourseClick(fragmentManager: FragmentManager, courseId: String) {
+        if (courseId.isNotEmpty()) {
+            router.navigateToCourseOutline(
+                fm = fragmentManager,
+                courseId = courseId,
+                courseTitle = ""
+            )
+        }
+    }
+
+    fun navigateToDiscovery() {
+        viewModelScope.launch { notifier.send(DashboardEvent.NavigationToDiscovery) }
+    }
+
+    fun refreshCookie() {
+        viewModelScope.launch { edxCookieManager.tryToRefreshSessionCookie() }
+    }
+}
diff --git a/dashboard/src/main/res/values/strings.xml b/dashboard/src/main/res/values/strings.xml
index b5f67dbeb..5eb61aadc 100644
--- a/dashboard/src/main/res/values/strings.xml
+++ b/dashboard/src/main/res/values/strings.xml
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<resources>
+<resources xmlns:tools="http://schemas.android.com/tools">
     <string name="dashboard_title">Dashboard</string>
     <string name="dashboard_courses">Courses</string>
+    <string name="dashboard_programs" tools:ignore="MissingTranslation">Programs</string>
     <string name="dashboard_welcome_back">Welcome back. Let\'s keep learning.</string>
     <string name="dashboard_its_empty">It\'s empty</string>
     <string name="dashboard_you_are_not_enrolled">You are not enrolled in any courses yet.</string>
-</resources>
\ No newline at end of file
+    <string name="dashboard_enrolled_successfully" tools:ignore="MissingTranslation">You have been successfully enrolled in this course.</string>
+</resources>
diff --git a/dashboard/src/test/java/org/openedx/dashboard/presentation/DashboardViewModelTest.kt b/dashboard/src/test/java/org/openedx/dashboard/presentation/DashboardViewModelTest.kt
index 05624f98b..3ade5f4c6 100644
--- a/dashboard/src/test/java/org/openedx/dashboard/presentation/DashboardViewModelTest.kt
+++ b/dashboard/src/test/java/org/openedx/dashboard/presentation/DashboardViewModelTest.kt
@@ -4,21 +4,15 @@ import androidx.arch.core.executor.testing.InstantTaskExecutorRule
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LifecycleRegistry
-import org.openedx.core.system.connection.NetworkConnection
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.DashboardCourseList
-import org.openedx.core.domain.model.Pagination
-import org.openedx.core.system.ResourceManager
-import org.openedx.core.system.notifier.CourseDashboardUpdate
-import org.openedx.core.system.notifier.CourseNotifier
-import org.openedx.dashboard.domain.interactor.DashboardInteractor
 import io.mockk.coEvery
 import io.mockk.coVerify
 import io.mockk.every
 import io.mockk.mockk
+import io.mockk.spyk
+import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.emptyFlow
 import kotlinx.coroutines.flow.flow
 import kotlinx.coroutines.test.*
 import org.junit.After
@@ -27,6 +21,21 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.domain.model.DashboardCourseList
+import org.openedx.core.domain.model.Pagination
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.AppUpgradeNotifier
+import org.openedx.core.system.notifier.CourseDashboardUpdate
+import org.openedx.core.system.notifier.CourseNotifier
+import org.openedx.dashboard.domain.interactor.DashboardInteractor
+import org.openedx.dashboard.notifier.DashboardNotifier
+import org.openedx.dashboard.presentation.dashboard.DashboardAnalytics
+import org.openedx.dashboard.presentation.dashboard.DashboardUIState
+import org.openedx.dashboard.presentation.dashboard.DashboardViewModel
 import java.net.UnknownHostException
 
 @OptIn(ExperimentalCoroutinesApi::class)
@@ -37,11 +46,14 @@ class DashboardViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
     private val resourceManager = mockk<ResourceManager>()
     private val interactor = mockk<DashboardInteractor>()
     private val networkConnection = mockk<NetworkConnection>()
-    private val notifier = mockk<CourseNotifier>()
+    private val courseNotifier = mockk<CourseNotifier>()
+    private val dashboardNotifier = spyk<DashboardNotifier>()
     private val analytics = mockk<DashboardAnalytics>()
+    private val appUpgradeNotifier = mockk<AppUpgradeNotifier>()
 
     private val noInternet = "Slow or no internet connection"
     private val somethingWrong = "Something went wrong"
@@ -56,6 +68,8 @@ class DashboardViewModelTest {
         Dispatchers.setMain(dispatcher)
         every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
+        every { appUpgradeNotifier.notifier } returns emptyFlow()
+        every { config.getApiHostURL() } returns "http://localhost:8000"
     }
 
     @After
@@ -65,14 +79,14 @@ class DashboardViewModelTest {
 
     @Test
     fun `getCourses no internet connection`() = runTest {
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } throws UnknownHostException()
-
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assertEquals(noInternet, message?.message)
@@ -81,14 +95,14 @@ class DashboardViewModelTest {
 
     @Test
     fun `getCourses unknown error`() = runTest {
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } throws Exception()
-
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assertEquals(somethingWrong, message?.message)
@@ -97,15 +111,15 @@ class DashboardViewModelTest {
 
     @Test
     fun `getCourses from network`() = runTest {
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } returns dashboardCourseList
         coEvery { interactor.getEnrolledCoursesFromCache() } returns listOf(mockk())
-
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         assert(viewModel.uiMessage.value == null)
         assert(viewModel.uiState.value is DashboardUIState.Courses)
@@ -113,7 +127,7 @@ class DashboardViewModelTest {
 
     @Test
     fun `getCourses from network with next page`() = runTest {
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } returns dashboardCourseList.copy(
             Pagination(
@@ -129,6 +143,7 @@ class DashboardViewModelTest {
 
         coVerify(exactly = 1) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         assert(viewModel.uiMessage.value == null)
         assert(viewModel.uiState.value is DashboardUIState.Courses)
@@ -138,13 +153,13 @@ class DashboardViewModelTest {
     fun `getCourses from cache`() = runTest {
         every { networkConnection.isOnline() } returns false
         coEvery { interactor.getEnrolledCoursesFromCache() } returns listOf(mockk())
-
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
 
         advanceUntilIdle()
 
         coVerify(exactly = 0) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 1) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         assert(viewModel.uiMessage.value == null)
         assert(viewModel.uiState.value is DashboardUIState.Courses)
@@ -154,7 +169,7 @@ class DashboardViewModelTest {
     fun `updateCourses no internet error`() = runTest {
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } returns dashboardCourseList
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
 
         coEvery { interactor.getEnrolledCourses(any()) } throws UnknownHostException()
         viewModel.updateCourses()
@@ -162,6 +177,7 @@ class DashboardViewModelTest {
 
         coVerify(exactly = 2) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assertEquals(noInternet, message?.message)
@@ -173,8 +189,7 @@ class DashboardViewModelTest {
     fun `updateCourses unknown exception`() = runTest {
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } returns dashboardCourseList
-
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
 
         coEvery { interactor.getEnrolledCourses(any()) } throws Exception()
         viewModel.updateCourses()
@@ -182,6 +197,7 @@ class DashboardViewModelTest {
 
         coVerify(exactly = 2) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assertEquals(somethingWrong, message?.message)
@@ -193,13 +209,14 @@ class DashboardViewModelTest {
     fun `updateCourses success`() = runTest {
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } returns dashboardCourseList
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
 
         viewModel.updateCourses()
         advanceUntilIdle()
 
         coVerify(exactly = 2) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         assert(viewModel.uiMessage.value == null)
         assert(viewModel.updating.value == false)
@@ -210,13 +227,14 @@ class DashboardViewModelTest {
     fun `updateCourses success with next page`() = runTest {
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getEnrolledCourses(any()) } returns dashboardCourseList.copy(Pagination(10,"2",2,""))
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
 
         viewModel.updateCourses()
         advanceUntilIdle()
 
         coVerify(exactly = 2) { interactor.getEnrolledCourses(any()) }
         coVerify(exactly = 0) { interactor.getEnrolledCoursesFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         assert(viewModel.uiMessage.value == null)
         assert(viewModel.updating.value == false)
@@ -225,9 +243,8 @@ class DashboardViewModelTest {
 
     @Test
     fun `CourseDashboardUpdate notifier test`() = runTest {
-        coEvery { notifier.notifier } returns flow { emit(CourseDashboardUpdate()) }
-
-        val viewModel = DashboardViewModel(networkConnection, interactor, resourceManager, notifier, analytics)
+        coEvery { courseNotifier.notifier } returns flow { emit(CourseDashboardUpdate()) }
+        val viewModel = DashboardViewModel(config, networkConnection, interactor, resourceManager, courseNotifier, dashboardNotifier, analytics, appUpgradeNotifier)
 
         val mockLifeCycleOwner: LifecycleOwner = mockk()
         val lifecycleRegistry = LifecycleRegistry(mockLifeCycleOwner)
@@ -237,7 +254,7 @@ class DashboardViewModelTest {
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getEnrolledCourses(any()) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
     }
 
-
-}
\ No newline at end of file
+}
diff --git a/default_config/config_settings.yaml b/default_config/config_settings.yaml
new file mode 100644
index 000000000..249e93fc3
--- /dev/null
+++ b/default_config/config_settings.yaml
@@ -0,0 +1,5 @@
+config_directory: './default_config'
+config_mapping:
+  prod: 'prod'
+  stage: 'stage'
+  dev: 'dev'
diff --git a/default_config/dev/config.yaml b/default_config/dev/config.yaml
new file mode 100644
index 000000000..f074ddd9d
--- /dev/null
+++ b/default_config/dev/config.yaml
@@ -0,0 +1,59 @@
+API_HOST_URL: 'http://localhost:8000'
+APPLICATION_ID: 'org.openedx.app'
+ENVIRONMENT_DISPLAY_NAME: 'Localhost'
+URI_SCHEME: ''
+FEEDBACK_EMAIL_ADDRESS: 'support@example.com'
+FAQ_URL: ''
+OAUTH_CLIENT_ID: 'OAUTH_CLIENT_ID'
+
+# Keep empty to hide setting
+AGREEMENT_URLS:
+  PRIVACY_POLICY_URL: ''
+  COOKIE_POLICY_URL: ''
+  DATA_SELL_CONSENT_URL: ''
+  TOS_URL: ''
+  EULA_URL: ''
+  SUPPORTED_LANGUAGES: [ ] #en is defalut language
+
+DISCOVERY:
+  TYPE: 'native'
+  WEBVIEW:
+    BASE_URL: ''
+    COURSE_DETAIL_TEMPLATE: ''
+    PROGRAM_DETAIL_TEMPLATE: ''
+
+PROGRAM:
+  TYPE: 'native'
+  WEBVIEW:
+    PROGRAM_URL: ''
+    PROGRAM_DETAIL_URL_TEMPLATE: ''
+
+GOOGLE:
+  ENABLED: false
+  CLIENT_ID: ''
+
+MICROSOFT:
+  ENABLED: false
+  CLIENT_ID: ''
+  PACKAGE_SIGNATURE: ''
+
+FACEBOOK:
+  ENABLED: false
+  FACEBOOK_APP_ID: ''
+  CLIENT_TOKEN: ''
+
+#Platform names
+PLATFORM_NAME: "OpenEdX"
+PLATFORM_FULL_NAME: "OpenEdX"
+#tokenType enum accepts JWT and BEARER only
+TOKEN_TYPE: "JWT"
+#feature flag for activating What’s New feature
+WHATS_NEW_ENABLED: false
+#feature flag enable Social Login buttons
+SOCIAL_AUTH_ENABLED: false
+#Course navigation feature flags
+COURSE_NESTED_LIST_ENABLED: false
+COURSE_BANNER_ENABLED: true
+COURSE_TOP_TAB_BAR_ENABLED: false
+COURSE_UNIT_PROGRESS_ENABLED: false
+
diff --git a/default_config/dev/file_mappings.yaml b/default_config/dev/file_mappings.yaml
new file mode 100644
index 000000000..192ee5629
--- /dev/null
+++ b/default_config/dev/file_mappings.yaml
@@ -0,0 +1,3 @@
+android:
+  files:
+    - config.yaml
diff --git a/default_config/prod/config.yaml b/default_config/prod/config.yaml
new file mode 100644
index 000000000..25df957a0
--- /dev/null
+++ b/default_config/prod/config.yaml
@@ -0,0 +1,58 @@
+API_HOST_URL: 'http://localhost:8000'
+APPLICATION_ID: 'org.openedx.app'
+ENVIRONMENT_DISPLAY_NAME: 'Localhost'
+URI_SCHEME: ''
+FEEDBACK_EMAIL_ADDRESS: 'support@example.com'
+FAQ_URL: ''
+OAUTH_CLIENT_ID: 'OAUTH_CLIENT_ID'
+
+# Keep empty to hide setting
+AGREEMENT_URLS:
+  PRIVACY_POLICY_URL: ''
+  COOKIE_POLICY_URL: ''
+  DATA_SELL_CONSENT_URL: ''
+  TOS_URL: ''
+  EULA_URL: ''
+  SUPPORTED_LANGUAGES: [ ] #en is defalut language
+
+DISCOVERY:
+  TYPE: 'native'
+  WEBVIEW:
+    BASE_URL: ''
+    COURSE_DETAIL_TEMPLATE: ''
+    PROGRAM_DETAIL_TEMPLATE: ''
+
+PROGRAM:
+  TYPE: 'native'
+  WEBVIEW:
+    PROGRAM_URL: ''
+    PROGRAM_DETAIL_URL_TEMPLATE: ''
+
+GOOGLE:
+  ENABLED: false
+  CLIENT_ID: ''
+
+MICROSOFT:
+  ENABLED: false
+  CLIENT_ID: ''
+  PACKAGE_SIGNATURE: ''
+
+FACEBOOK:
+  ENABLED: false
+  FACEBOOK_APP_ID: ''
+  CLIENT_TOKEN: ''
+
+#Platform names
+PLATFORM_NAME: "OpenEdX"
+PLATFORM_FULL_NAME: "OpenEdX"
+#tokenType enum accepts JWT and BEARER only
+TOKEN_TYPE: "JWT"
+#feature flag for activating What’s New feature
+WHATS_NEW_ENABLED: false
+#feature flag enable Social Login buttons
+SOCIAL_AUTH_ENABLED: false
+#Course navigation feature flags
+COURSE_NESTED_LIST_ENABLED: false
+COURSE_BANNER_ENABLED: true
+COURSE_TOP_TAB_BAR_ENABLED: false
+COURSE_UNIT_PROGRESS_ENABLED: false
diff --git a/default_config/prod/file_mappings.yaml b/default_config/prod/file_mappings.yaml
new file mode 100644
index 000000000..192ee5629
--- /dev/null
+++ b/default_config/prod/file_mappings.yaml
@@ -0,0 +1,3 @@
+android:
+  files:
+    - config.yaml
diff --git a/default_config/stage/config.yaml b/default_config/stage/config.yaml
new file mode 100644
index 000000000..25df957a0
--- /dev/null
+++ b/default_config/stage/config.yaml
@@ -0,0 +1,58 @@
+API_HOST_URL: 'http://localhost:8000'
+APPLICATION_ID: 'org.openedx.app'
+ENVIRONMENT_DISPLAY_NAME: 'Localhost'
+URI_SCHEME: ''
+FEEDBACK_EMAIL_ADDRESS: 'support@example.com'
+FAQ_URL: ''
+OAUTH_CLIENT_ID: 'OAUTH_CLIENT_ID'
+
+# Keep empty to hide setting
+AGREEMENT_URLS:
+  PRIVACY_POLICY_URL: ''
+  COOKIE_POLICY_URL: ''
+  DATA_SELL_CONSENT_URL: ''
+  TOS_URL: ''
+  EULA_URL: ''
+  SUPPORTED_LANGUAGES: [ ] #en is defalut language
+
+DISCOVERY:
+  TYPE: 'native'
+  WEBVIEW:
+    BASE_URL: ''
+    COURSE_DETAIL_TEMPLATE: ''
+    PROGRAM_DETAIL_TEMPLATE: ''
+
+PROGRAM:
+  TYPE: 'native'
+  WEBVIEW:
+    PROGRAM_URL: ''
+    PROGRAM_DETAIL_URL_TEMPLATE: ''
+
+GOOGLE:
+  ENABLED: false
+  CLIENT_ID: ''
+
+MICROSOFT:
+  ENABLED: false
+  CLIENT_ID: ''
+  PACKAGE_SIGNATURE: ''
+
+FACEBOOK:
+  ENABLED: false
+  FACEBOOK_APP_ID: ''
+  CLIENT_TOKEN: ''
+
+#Platform names
+PLATFORM_NAME: "OpenEdX"
+PLATFORM_FULL_NAME: "OpenEdX"
+#tokenType enum accepts JWT and BEARER only
+TOKEN_TYPE: "JWT"
+#feature flag for activating What’s New feature
+WHATS_NEW_ENABLED: false
+#feature flag enable Social Login buttons
+SOCIAL_AUTH_ENABLED: false
+#Course navigation feature flags
+COURSE_NESTED_LIST_ENABLED: false
+COURSE_BANNER_ENABLED: true
+COURSE_TOP_TAB_BAR_ENABLED: false
+COURSE_UNIT_PROGRESS_ENABLED: false
diff --git a/default_config/stage/file_mappings.yaml b/default_config/stage/file_mappings.yaml
new file mode 100644
index 000000000..192ee5629
--- /dev/null
+++ b/default_config/stage/file_mappings.yaml
@@ -0,0 +1,3 @@
+android:
+  files:
+    - config.yaml
diff --git a/discovery/build.gradle b/discovery/build.gradle
index 8e651abda..881d8c05a 100644
--- a/discovery/build.gradle
+++ b/discovery/build.gradle
@@ -59,6 +59,7 @@ dependencies {
     implementation project(path: ':core')
 
     kapt "androidx.room:room-compiler:$room_version"
+    implementation 'androidx.activity:activity-compose:1.8.1'
 
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
@@ -70,4 +71,4 @@ dependencies {
     testImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:$coroutines_version"
     testImplementation "androidx.arch.core:core-testing:$android_arch_version"
 
-}
\ No newline at end of file
+}
diff --git a/discovery/src/androidTest/java/org/openedx/discovery/presentation/DiscoveryScreenTest.kt b/discovery/src/androidTest/java/org/openedx/discovery/presentation/DiscoveryScreenTest.kt
index 3975cb6c7..6a70f334b 100644
--- a/discovery/src/androidTest/java/org/openedx/discovery/presentation/DiscoveryScreenTest.kt
+++ b/discovery/src/androidTest/java/org/openedx/discovery/presentation/DiscoveryScreenTest.kt
@@ -2,14 +2,20 @@ package org.openedx.discovery.presentation
 
 import androidx.activity.ComponentActivity
 import androidx.compose.ui.semantics.ProgressBarRangeInfo
-import androidx.compose.ui.test.*
+import androidx.compose.ui.test.assertAny
+import androidx.compose.ui.test.hasAnyChild
+import androidx.compose.ui.test.hasProgressBarRangeInfo
+import androidx.compose.ui.test.hasScrollAction
+import androidx.compose.ui.test.hasText
 import androidx.compose.ui.test.junit4.createAndroidComposeRule
+import androidx.compose.ui.test.onChildren
+import org.junit.Rule
+import org.junit.Test
+import org.openedx.core.AppUpdateState
 import org.openedx.core.domain.model.Course
 import org.openedx.core.domain.model.Media
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
-import org.junit.Rule
-import org.junit.Test
 import java.util.Date
 
 class DiscoveryScreenTest {
@@ -53,11 +59,14 @@ class DiscoveryScreenTest {
                 canLoadMore = false,
                 refreshing = false,
                 hasInternetConnection = true,
+                canShowBackButton = false,
+                appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
                 onSearchClick = {},
                 onSwipeRefresh = {},
                 paginationCallback = {},
                 onItemClick = {},
-                onReloadClick = {}
+                onReloadClick = {},
+                onBackClick = {},
             )
         }
 
@@ -85,11 +94,14 @@ class DiscoveryScreenTest {
                 canLoadMore = false,
                 refreshing = false,
                 hasInternetConnection = true,
+                canShowBackButton = false,
+                appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
                 onSearchClick = {},
                 onSwipeRefresh = {},
                 paginationCallback = {},
                 onItemClick = {},
-                onReloadClick = {}
+                onReloadClick = {},
+                onBackClick = {},
             )
         }
 
@@ -108,11 +120,14 @@ class DiscoveryScreenTest {
                 canLoadMore = true,
                 refreshing = false,
                 hasInternetConnection = true,
+                canShowBackButton = false,
+                appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
                 onSearchClick = {},
                 onSwipeRefresh = {},
                 paginationCallback = {},
                 onItemClick = {},
-                onReloadClick = {}
+                onReloadClick = {},
+                onBackClick = {},
             )
         }
 
diff --git a/discovery/src/main/java/org/openedx/discovery/data/repository/DiscoveryRepository.kt b/discovery/src/main/java/org/openedx/discovery/data/repository/DiscoveryRepository.kt
index 2762cf1aa..db2f02d65 100644
--- a/discovery/src/main/java/org/openedx/discovery/data/repository/DiscoveryRepository.kt
+++ b/discovery/src/main/java/org/openedx/discovery/data/repository/DiscoveryRepository.kt
@@ -20,6 +20,7 @@ class DiscoveryRepository(
         val pageResponse = api.getCourseList(
             page = pageNumber,
             mobile = true,
+            mobileSearch = false,
             username = username,
             org = organization
         )
@@ -42,7 +43,12 @@ class DiscoveryRepository(
         query: String,
         pageNumber: Int,
     ): CourseList {
-        val pageResponse = api.getCourseList(searchQuery = query, page = pageNumber, mobile = true)
+        val pageResponse = api.getCourseList(
+            searchQuery = query,
+            page = pageNumber,
+            mobile = true,
+            mobileSearch = true
+        )
         return CourseList(
             pageResponse.pagination.mapToDomain(),
             pageResponse.results?.map { it.mapToDomain() } ?: emptyList()
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryNavigator.kt b/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryNavigator.kt
new file mode 100644
index 000000000..ff2e32178
--- /dev/null
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryNavigator.kt
@@ -0,0 +1,15 @@
+package org.openedx.discovery.presentation
+
+import androidx.fragment.app.Fragment
+
+class DiscoveryNavigator(
+    private val isDiscoveryTypeWebView: Boolean,
+) {
+    fun getDiscoveryFragment(): Fragment {
+        return if (isDiscoveryTypeWebView) {
+            WebViewDiscoveryFragment()
+        } else {
+            NativeDiscoveryFragment()
+        }
+    }
+}
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryRouter.kt b/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryRouter.kt
index 12ee9ce93..fa66c542b 100644
--- a/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryRouter.kt
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryRouter.kt
@@ -6,6 +6,13 @@ interface DiscoveryRouter {
 
     fun navigateToCourseDetail(fm: FragmentManager, courseId: String)
 
-    fun navigateToCourseSearch(fm: FragmentManager)
+    fun navigateToCourseSearch(fm: FragmentManager, querySearch: String)
 
-}
\ No newline at end of file
+    fun navigateToUpgradeRequired(fm: FragmentManager)
+
+    fun navigateToCourseInfo(fm: FragmentManager, courseId: String, infoType: String)
+
+    fun navigateToSignUp(fm: FragmentManager, courseId: String? = null)
+
+    fun navigateToSignIn(fm: FragmentManager, courseId: String?)
+}
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryFragment.kt b/discovery/src/main/java/org/openedx/discovery/presentation/NativeDiscoveryFragment.kt
similarity index 58%
rename from discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryFragment.kt
rename to discovery/src/main/java/org/openedx/discovery/presentation/NativeDiscoveryFragment.kt
index 2d7809826..f68785720 100644
--- a/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryFragment.kt
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/NativeDiscoveryFragment.kt
@@ -4,17 +4,41 @@ import android.content.res.Configuration
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.*
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Divider
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
 import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
-import androidx.compose.runtime.*
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
@@ -24,21 +48,39 @@ import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.core.AppUpdateState
+import org.openedx.core.AppUpdateState.wasUpdateDialogClosed
 import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.Course
 import org.openedx.core.domain.model.Media
-import org.openedx.core.ui.*
+import org.openedx.core.presentation.dialog.appupgrade.AppUpgradeDialogFragment
+import org.openedx.core.presentation.global.app_upgrade.AppUpgradeRecommendedBox
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.ui.AuthButtonsPanel
+import org.openedx.core.ui.BackBtn
+import org.openedx.core.ui.DiscoveryCourseItem
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.OfflineModeDialog
+import org.openedx.core.ui.StaticSearchBar
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.shouldLoadMore
+import org.openedx.core.ui.statusBarsInset
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
 import org.openedx.discovery.R
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
 
-class DiscoveryFragment : Fragment() {
+class NativeDiscoveryFragment : Fragment() {
 
-    private val viewModel by viewModel<DiscoveryViewModel>()
+    private val viewModel by viewModel<NativeDiscoveryViewModel>()
     private val router: DiscoveryRouter by inject()
 
     override fun onCreateView(
@@ -55,18 +97,43 @@ class DiscoveryFragment : Fragment() {
                 val uiMessage by viewModel.uiMessage.observeAsState()
                 val canLoadMore by viewModel.canLoadMore.observeAsState(false)
                 val refreshing by viewModel.isUpdating.observeAsState(false)
+                val appUpgradeEvent by viewModel.appUpgradeEvent.observeAsState()
+                val wasUpdateDialogClosed by remember { wasUpdateDialogClosed }
+                val querySearch = arguments?.getString(ARG_SEARCH_QUERY, "") ?: ""
 
                 DiscoveryScreen(
                     windowSize = windowSize,
                     state = uiState!!,
                     uiMessage = uiMessage,
+                    apiHostUrl = viewModel.apiHostUrl,
                     canLoadMore = canLoadMore,
                     refreshing = refreshing,
                     hasInternetConnection = viewModel.hasInternetConnection,
+                    canShowBackButton = viewModel.canShowBackButton,
+                    isUserLoggedIn = viewModel.isUserLoggedIn,
+                    appUpgradeParameters = AppUpdateState.AppUpgradeParameters(
+                        appUpgradeEvent = appUpgradeEvent,
+                        wasUpdateDialogClosed = wasUpdateDialogClosed,
+                        appUpgradeRecommendedDialog = {
+                            val dialog = AppUpgradeDialogFragment.newInstance()
+                            dialog.show(
+                                requireActivity().supportFragmentManager,
+                                AppUpgradeDialogFragment::class.simpleName
+                            )
+                        },
+                        onAppUpgradeRecommendedBoxClick = {
+                            AppUpdateState.openPlayMarket(requireContext())
+                        },
+                        onAppUpgradeRequired = {
+                            router.navigateToUpgradeRequired(
+                                requireActivity().supportFragmentManager
+                            )
+                        }
+                    ),
                     onSearchClick = {
                         viewModel.discoverySearchBarClickedEvent()
                         router.navigateToCourseSearch(
-                            requireActivity().supportFragmentManager
+                            requireActivity().supportFragmentManager, ""
                         )
                     },
                     paginationCallback = {
@@ -81,13 +148,41 @@ class DiscoveryFragment : Fragment() {
                     onItemClick = { course ->
                         viewModel.discoveryCourseClicked(course.id, course.name)
                         router.navigateToCourseDetail(
-                            requireParentFragment().parentFragmentManager,
+                            requireActivity().supportFragmentManager,
                             course.id
                         )
+                    },
+                    onRegisterClick = {
+                        router.navigateToSignUp(parentFragmentManager, null)
+                    },
+                    onSignInClick = {
+                        router.navigateToSignIn(parentFragmentManager, null)
+                    },
+                    onBackClick = {
+                        requireActivity().supportFragmentManager.popBackStackImmediate()
                     })
+                LaunchedEffect(uiState) {
+                    if (querySearch.isNotEmpty()) {
+                        router.navigateToCourseSearch(
+                            requireActivity().supportFragmentManager, querySearch
+                        )
+                        arguments?.putString(ARG_SEARCH_QUERY, "")
+                    }
+                }
             }
         }
     }
+
+    companion object {
+        private const val ARG_SEARCH_QUERY = "query_search"
+        fun newInstance(querySearch: String): NativeDiscoveryFragment {
+            val fragment = NativeDiscoveryFragment()
+            fragment.arguments = bundleOf(
+                ARG_SEARCH_QUERY to querySearch
+            )
+            return fragment
+        }
+    }
 }
 
 
@@ -97,19 +192,26 @@ internal fun DiscoveryScreen(
     windowSize: WindowSize,
     state: DiscoveryUIState,
     uiMessage: UIMessage?,
+    apiHostUrl: String,
     canLoadMore: Boolean,
     refreshing: Boolean,
     hasInternetConnection: Boolean,
+    canShowBackButton: Boolean,
+    isUserLoggedIn: Boolean,
+    appUpgradeParameters: AppUpdateState.AppUpgradeParameters,
     onSearchClick: () -> Unit,
     onSwipeRefresh: () -> Unit,
     onReloadClick: () -> Unit,
     paginationCallback: () -> Unit,
-    onItemClick: (Course) -> Unit
+    onItemClick: (Course) -> Unit,
+    onRegisterClick: () -> Unit,
+    onSignInClick: () -> Unit,
+    onBackClick: () -> Unit,
 ) {
     val scaffoldState = rememberScaffoldState()
     val scrollState = rememberLazyListState()
     val firstVisibleIndex = remember {
-        mutableStateOf(scrollState.firstVisibleItemIndex)
+        mutableIntStateOf(scrollState.firstVisibleItemIndex)
     }
     val pullRefreshState =
         rememberPullRefreshState(refreshing = refreshing, onRefresh = { onSwipeRefresh() })
@@ -121,7 +223,23 @@ internal fun DiscoveryScreen(
     Scaffold(
         scaffoldState = scaffoldState,
         modifier = Modifier.fillMaxSize(),
-        backgroundColor = MaterialTheme.appColors.background
+        backgroundColor = MaterialTheme.appColors.background,
+        bottomBar = {
+            if (!isUserLoggedIn) {
+                Box(
+                    modifier = Modifier
+                        .padding(
+                            horizontal = 16.dp,
+                            vertical = 32.dp,
+                        )
+                ) {
+                    AuthButtonsPanel(
+                        onRegisterClick = onRegisterClick,
+                        onSignInClick = onSignInClick
+                    )
+                }
+            }
+        }
     ) {
 
         val searchTabWidth by remember(key1 = windowSize) {
@@ -156,11 +274,27 @@ internal fun DiscoveryScreen(
 
         HandleUIMessage(uiMessage = uiMessage, scaffoldState = scaffoldState)
 
+        if (canShowBackButton) {
+            Box(
+                modifier = Modifier
+                    .statusBarsPadding()
+                    .fillMaxWidth(),
+                contentAlignment = Alignment.CenterStart
+            ) {
+                BackBtn(
+                    modifier = Modifier.padding(end = 16.dp),
+                    tint = MaterialTheme.appColors.primary
+                ) {
+                    onBackClick()
+                }
+            }
+        }
         Column(
             Modifier
                 .fillMaxSize()
                 .padding(it)
-                .statusBarsInset(),
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             Column(
@@ -235,9 +369,10 @@ internal fun DiscoveryScreen(
                                     }
                                     items(state.courses) { course ->
                                         DiscoveryCourseItem(
-                                            course,
+                                            apiHostUrl = apiHostUrl,
+                                            course = course,
                                             windowSize = windowSize,
-                                            onClick = { courseId ->
+                                            onClick = {
                                                 onItemClick(course)
                                             })
                                         Divider()
@@ -266,19 +401,49 @@ internal fun DiscoveryScreen(
                         pullRefreshState,
                         Modifier.align(Alignment.TopCenter)
                     )
-                    if (!isInternetConnectionShown && !hasInternetConnection) {
-                        OfflineModeDialog(
-                            Modifier
-                                .fillMaxWidth()
-                                .align(Alignment.BottomCenter),
-                            onDismissCLick = {
-                                isInternetConnectionShown = true
-                            },
-                            onReloadClick = {
-                                isInternetConnectionShown = true
-                                onReloadClick()
+
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .align(Alignment.BottomCenter)
+                    ) {
+                        when (appUpgradeParameters.appUpgradeEvent) {
+                            is AppUpgradeEvent.UpgradeRecommendedEvent -> {
+                                if (appUpgradeParameters.wasUpdateDialogClosed) {
+                                    AppUpgradeRecommendedBox(
+                                        modifier = Modifier.fillMaxWidth(),
+                                        onClick = appUpgradeParameters.onAppUpgradeRecommendedBoxClick
+                                    )
+                                } else {
+                                    if (!AppUpdateState.wasUpdateDialogDisplayed) {
+                                        AppUpdateState.wasUpdateDialogDisplayed = true
+                                        appUpgradeParameters.appUpgradeRecommendedDialog()
+                                    }
+                                }
                             }
-                        )
+
+                            is AppUpgradeEvent.UpgradeRequiredEvent -> {
+                                if (!AppUpdateState.wasUpdateDialogDisplayed) {
+                                    AppUpdateState.wasUpdateDialogDisplayed = true
+                                    appUpgradeParameters.onAppUpgradeRequired()
+                                }
+                            }
+
+                            else -> {}
+                        }
+                        if (!isInternetConnectionShown && !hasInternetConnection) {
+                            OfflineModeDialog(
+                                Modifier
+                                    .fillMaxWidth(),
+                                onDismissCLick = {
+                                    isInternetConnectionShown = true
+                                },
+                                onReloadClick = {
+                                    isInternetConnectionShown = true
+                                    onReloadClick()
+                                }
+                            )
+                        }
                     }
                 }
             }
@@ -292,6 +457,7 @@ internal fun DiscoveryScreen(
 private fun CourseItemPreview() {
     OpenEdXTheme {
         DiscoveryCourseItem(
+            apiHostUrl = "",
             course = mockCourse,
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
             onClick = {})
@@ -319,6 +485,7 @@ private fun DiscoveryScreenPreview() {
                 )
             ),
             uiMessage = null,
+            apiHostUrl = "",
             onSearchClick = {},
             paginationCallback = {},
             onSwipeRefresh = {},
@@ -326,7 +493,13 @@ private fun DiscoveryScreenPreview() {
             onReloadClick = {},
             canLoadMore = false,
             refreshing = false,
-            hasInternetConnection = true
+            hasInternetConnection = true,
+            isUserLoggedIn = false,
+            appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
+            onSignInClick = {},
+            onRegisterClick = {},
+            onBackClick = {},
+            canShowBackButton = false
         )
     }
 }
@@ -352,6 +525,7 @@ private fun DiscoveryScreenTabletPreview() {
                 )
             ),
             uiMessage = null,
+            apiHostUrl = "",
             onSearchClick = {},
             paginationCallback = {},
             onSwipeRefresh = {},
@@ -359,7 +533,13 @@ private fun DiscoveryScreenTabletPreview() {
             onReloadClick = {},
             canLoadMore = false,
             refreshing = false,
-            hasInternetConnection = true
+            hasInternetConnection = true,
+            isUserLoggedIn = true,
+            appUpgradeParameters = AppUpdateState.AppUpgradeParameters(),
+            onSignInClick = {},
+            onRegisterClick = {},
+            onBackClick = {},
+            canShowBackButton = false
         )
     }
 }
@@ -386,4 +566,4 @@ private val mockCourse = Course(
     startType = "startType",
     overview = "",
     isEnrolled = false
-)
\ No newline at end of file
+)
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryViewModel.kt b/discovery/src/main/java/org/openedx/discovery/presentation/NativeDiscoveryViewModel.kt
similarity index 74%
rename from discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryViewModel.kt
rename to discovery/src/main/java/org/openedx/discovery/presentation/NativeDiscoveryViewModel.kt
index a1352333e..0a2d5603c 100644
--- a/discovery/src/main/java/org/openedx/discovery/presentation/DiscoveryViewModel.kt
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/NativeDiscoveryViewModel.kt
@@ -3,21 +3,37 @@ package org.openedx.discovery.presentation
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
-import org.openedx.core.*
+import kotlinx.coroutines.FlowPreview
+import kotlinx.coroutines.flow.debounce
+import kotlinx.coroutines.launch
+import org.openedx.core.BaseViewModel
+import org.openedx.core.R
+import org.openedx.core.SingleEventLiveData
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.Course
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.ResourceManager
 import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.system.notifier.AppUpgradeNotifier
 import org.openedx.discovery.domain.interactor.DiscoveryInteractor
-import kotlinx.coroutines.launch
 
-class DiscoveryViewModel(
+class NativeDiscoveryViewModel(
+    private val config: Config,
     private val networkConnection: NetworkConnection,
     private val interactor: DiscoveryInteractor,
     private val resourceManager: ResourceManager,
-    private val analytics: DiscoveryAnalytics
+    private val analytics: DiscoveryAnalytics,
+    private val appUpgradeNotifier: AppUpgradeNotifier,
+    private val corePreferences: CorePreferences
 ) : BaseViewModel() {
 
+    val apiHostUrl get() = config.getApiHostURL()
+    val isUserLoggedIn get() = corePreferences.user != null
+    val canShowBackButton get() = config.isPreLoginExperienceEnabled() && !isUserLoggedIn
+
     private val _uiState = MutableLiveData<DiscoveryUIState>(DiscoveryUIState.Loading)
     val uiState: LiveData<DiscoveryUIState>
         get() = _uiState
@@ -34,6 +50,10 @@ class DiscoveryViewModel(
     val isUpdating: LiveData<Boolean>
         get() = _isUpdating
 
+    private val _appUpgradeEvent = MutableLiveData<AppUpgradeEvent>()
+    val appUpgradeEvent: LiveData<AppUpgradeEvent>
+        get() = _appUpgradeEvent
+
     val hasInternetConnection: Boolean
         get() = networkConnection.isOnline()
 
@@ -43,6 +63,7 @@ class DiscoveryViewModel(
 
     init {
         getCoursesList()
+        collectAppUpgradeEvent()
     }
 
     private fun loadCoursesInternal(
@@ -136,6 +157,25 @@ class DiscoveryViewModel(
         }
     }
 
+    @OptIn(FlowPreview::class)
+    private fun collectAppUpgradeEvent() {
+        viewModelScope.launch {
+            appUpgradeNotifier.notifier
+                .debounce(100)
+                .collect { event ->
+                    when (event) {
+                        is AppUpgradeEvent.UpgradeRecommendedEvent -> {
+                            _appUpgradeEvent.value = event
+                        }
+
+                        is AppUpgradeEvent.UpgradeRequiredEvent -> {
+                            _appUpgradeEvent.value = AppUpgradeEvent.UpgradeRequiredEvent
+                        }
+                    }
+                }
+        }
+    }
+
     fun discoverySearchBarClickedEvent() {
         analytics.discoverySearchBarClickedEvent()
     }
@@ -143,4 +183,4 @@ class DiscoveryViewModel(
     fun discoveryCourseClicked(courseId: String, courseName: String) {
         analytics.discoveryCourseClickedEvent(courseId, courseName)
     }
-}
\ No newline at end of file
+}
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/WebViewDiscoveryFragment.kt b/discovery/src/main/java/org/openedx/discovery/presentation/WebViewDiscoveryFragment.kt
new file mode 100644
index 000000000..a30d6075d
--- /dev/null
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/WebViewDiscoveryFragment.kt
@@ -0,0 +1,296 @@
+package org.openedx.discovery.presentation
+
+import android.annotation.SuppressLint
+import android.content.res.Configuration
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import android.webkit.WebView
+import androidx.activity.OnBackPressedCallback
+import androidx.activity.compose.LocalOnBackPressedDispatcherOwner
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.compose.ui.zIndex
+import androidx.fragment.app.Fragment
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleEventObserver
+import androidx.lifecycle.LifecycleOwner
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.openedx.core.presentation.catalog.CatalogWebViewScreen
+import org.openedx.core.presentation.catalog.WebViewLink
+import org.openedx.core.presentation.dialog.alert.ActionDialogFragment
+import org.openedx.core.ui.ConnectionErrorView
+import org.openedx.core.ui.Toolbar
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.discovery.R
+import org.openedx.core.R as CoreR
+
+class WebViewDiscoveryFragment : Fragment() {
+
+    private val viewModel by viewModel<WebViewDiscoveryViewModel>()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val windowSize = rememberWindowSize()
+                var hasInternetConnection by remember {
+                    mutableStateOf(viewModel.hasInternetConnection)
+                }
+
+                WebViewDiscoveryScreen(
+                    windowSize = windowSize,
+                    contentUrl = viewModel.discoveryUrl,
+                    uriScheme = viewModel.uriScheme,
+                    hasInternetConnection = hasInternetConnection,
+                    checkInternetConnection = {
+                        hasInternetConnection = viewModel.hasInternetConnection
+                    },
+                    onWebPageUpdated = { url ->
+                        viewModel.updateDiscoveryUrl(url)
+                    },
+                    onUriClick = { param, authority ->
+                        when (authority) {
+                            WebViewLink.Authority.COURSE_INFO,
+                            WebViewLink.Authority.PROGRAM_INFO -> {
+                                viewModel.infoCardClicked(
+                                    fragmentManager = requireActivity().supportFragmentManager,
+                                    pathId = param,
+                                    infoType = authority.name
+                                )
+                            }
+
+                            WebViewLink.Authority.EXTERNAL -> {
+                                ActionDialogFragment.newInstance(
+                                    title = getString(CoreR.string.core_leaving_the_app),
+                                    message = getString(
+                                        CoreR.string.core_leaving_the_app_message,
+                                        getString(CoreR.string.platform_name)
+                                    ),
+                                    url = param,
+                                ).show(
+                                    requireActivity().supportFragmentManager,
+                                    ActionDialogFragment::class.simpleName
+                                )
+                            }
+
+                            else -> {}
+                        }
+                    }
+                )
+            }
+        }
+    }
+}
+
+@Composable
+@SuppressLint("SetJavaScriptEnabled")
+private fun WebViewDiscoveryScreen(
+    windowSize: WindowSize,
+    contentUrl: String,
+    uriScheme: String,
+    hasInternetConnection: Boolean,
+    checkInternetConnection: () -> Unit,
+    onWebPageUpdated: (String) -> Unit,
+    onUriClick: (String, WebViewLink.Authority) -> Unit
+) {
+    val scaffoldState = rememberScaffoldState()
+    val configuration = LocalConfiguration.current
+    var isLoading by remember { mutableStateOf(true) }
+
+    Scaffold(
+        scaffoldState = scaffoldState,
+        modifier = Modifier.fillMaxSize(),
+        backgroundColor = MaterialTheme.appColors.background
+    ) {
+        val modifierScreenWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
+                        Modifier.widthIn(Dp.Unspecified, 560.dp)
+                    } else {
+                        Modifier.widthIn(Dp.Unspecified, 650.dp)
+                    },
+                    compact = Modifier.fillMaxWidth()
+                )
+            )
+        }
+
+        Column(
+            modifier = modifierScreenWidth
+                .fillMaxSize()
+                .padding(it)
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Toolbar(label = stringResource(id = R.string.discovery_explore_the_catalog))
+
+            Surface {
+                Box(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(Color.White),
+                    contentAlignment = Alignment.TopCenter
+                ) {
+                    if (hasInternetConnection) {
+                        DiscoveryWebView(
+                            contentUrl = contentUrl,
+                            uriScheme = uriScheme,
+                            onWebPageLoaded = { isLoading = false },
+                            onWebPageUpdated = onWebPageUpdated,
+                            onUriClick = onUriClick,
+                        )
+                    } else {
+                        ConnectionErrorView(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .fillMaxHeight()
+                                .background(MaterialTheme.appColors.background)
+                        ) {
+                            checkInternetConnection()
+                        }
+                    }
+                    if (isLoading && hasInternetConnection) {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .zIndex(1f),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+@SuppressLint("SetJavaScriptEnabled")
+private fun DiscoveryWebView(
+    contentUrl: String,
+    uriScheme: String,
+    onWebPageLoaded: () -> Unit,
+    onWebPageUpdated: (String) -> Unit,
+    onUriClick: (String, WebViewLink.Authority) -> Unit,
+) {
+    val webView = CatalogWebViewScreen(
+        url = contentUrl,
+        uriScheme = uriScheme,
+        onWebPageLoaded = onWebPageLoaded,
+        onWebPageUpdated = onWebPageUpdated,
+        onUriClick = onUriClick,
+    )
+
+    AndroidView(
+        modifier = Modifier
+            .background(MaterialTheme.appColors.background),
+        factory = {
+            webView
+        }
+    )
+
+    HandleWebViewBackNavigation(webView = webView)
+}
+
+@Composable
+private fun HandleWebViewBackNavigation(
+    lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current,
+    webView: WebView?
+) {
+    val backDispatcher = LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher
+
+    val onBackPressedCallback = remember {
+        object : OnBackPressedCallback(true) {
+            override fun handleOnBackPressed() {
+                if (webView?.canGoBack() == true) {
+                    webView.goBack()
+                } else {
+                    this.isEnabled = false
+                    backDispatcher?.onBackPressed()
+                }
+            }
+        }
+    }
+
+    DisposableEffect(lifecycleOwner) {
+        val observer = LifecycleEventObserver { _, event ->
+            if (event == Lifecycle.Event.ON_RESUME) {
+                onBackPressedCallback.isEnabled = true
+            } else if (event == Lifecycle.Event.ON_PAUSE) {
+                onBackPressedCallback.isEnabled = false
+            }
+        }
+
+        lifecycleOwner.lifecycle.addObserver(observer)
+        onDispose {
+            lifecycleOwner.lifecycle.removeObserver(observer)
+        }
+    }
+
+    DisposableEffect(backDispatcher) {
+        backDispatcher?.addCallback(onBackPressedCallback)
+        onDispose {
+            onBackPressedCallback.remove()
+        }
+    }
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun WebViewDiscoveryScreenPreview() {
+    OpenEdXTheme {
+        WebViewDiscoveryScreen(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            contentUrl = "https://www.example.com/",
+            uriScheme = "",
+            hasInternetConnection = false,
+            checkInternetConnection = {},
+            onWebPageUpdated = {},
+            onUriClick = { _, _ -> },
+        )
+    }
+}
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/WebViewDiscoveryViewModel.kt b/discovery/src/main/java/org/openedx/discovery/presentation/WebViewDiscoveryViewModel.kt
new file mode 100644
index 000000000..a25bc801e
--- /dev/null
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/WebViewDiscoveryViewModel.kt
@@ -0,0 +1,40 @@
+package org.openedx.discovery.presentation
+
+import androidx.fragment.app.FragmentManager
+import org.openedx.core.BaseViewModel
+import org.openedx.core.config.Config
+import org.openedx.core.system.connection.NetworkConnection
+
+class WebViewDiscoveryViewModel(
+    private val config: Config,
+    private val networkConnection: NetworkConnection,
+    private val router: DiscoveryRouter,
+) : BaseViewModel() {
+
+    val uriScheme: String get() = config.getUriScheme()
+
+    val webViewConfig get() = config.getDiscoveryConfig().webViewConfig
+
+    private var _discoveryUrl = webViewConfig.baseUrl
+    val discoveryUrl: String
+        get() = _discoveryUrl
+
+    val hasInternetConnection: Boolean
+        get() = networkConnection.isOnline()
+
+    fun updateDiscoveryUrl(url: String) {
+        if (url.isNotEmpty()) {
+            _discoveryUrl = url
+        }
+    }
+
+    fun infoCardClicked(fragmentManager: FragmentManager, pathId: String, infoType: String) {
+        if (pathId.isNotEmpty() && infoType.isNotEmpty()) {
+            router.navigateToCourseInfo(
+                fragmentManager,
+                pathId,
+                infoType
+            )
+        }
+    }
+}
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchFragment.kt b/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchFragment.kt
index b81e6bea3..9329887fc 100644
--- a/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchFragment.kt
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchFragment.kt
@@ -4,17 +4,40 @@ import android.content.res.Configuration
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.*
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Divider
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
 import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
-import androidx.compose.runtime.*
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
@@ -24,6 +47,7 @@ import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.pluralStringResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -32,17 +56,28 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
+import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.Course
 import org.openedx.core.domain.model.Media
-import org.openedx.core.ui.*
+import org.openedx.core.ui.AuthButtonsPanel
+import org.openedx.core.ui.BackBtn
+import org.openedx.core.ui.DiscoveryCourseItem
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.SearchBar
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.shouldLoadMore
+import org.openedx.core.ui.statusBarsInset
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
 import org.openedx.discovery.presentation.DiscoveryRouter
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.discovery.R as discoveryR
 
 class CourseSearchFragment : Fragment() {
@@ -69,13 +104,17 @@ class CourseSearchFragment : Fragment() {
                 val uiMessage by viewModel.uiMessage.observeAsState()
                 val canLoadMore by viewModel.canLoadMore.observeAsState(false)
                 val refreshing by viewModel.isUpdating.observeAsState(false)
+                val querySearch = arguments?.getString(ARG_SEARCH_QUERY, "") ?: ""
 
                 CourseSearchScreen(
                     windowSize = windowSize,
                     state = uiState,
                     uiMessage = uiMessage,
+                    apiHostUrl = viewModel.apiHostUrl,
                     canLoadMore = canLoadMore,
                     refreshing = refreshing,
+                    querySearch = querySearch,
+                    isUserLoggedIn = viewModel.isUserLoggedIn,
                     onBackClick = {
                         requireActivity().supportFragmentManager.popBackStack()
                     },
@@ -93,12 +132,28 @@ class CourseSearchFragment : Fragment() {
                             requireActivity().supportFragmentManager,
                             it
                         )
-                    }
+                    },
+                    onRegisterClick = {
+                        router.navigateToSignUp(parentFragmentManager, null)
+                    },
+                    onSignInClick = {
+                        router.navigateToSignIn(parentFragmentManager, null)
+                    },
                 )
             }
         }
     }
 
+    companion object {
+        private const val ARG_SEARCH_QUERY = "query_search"
+        fun newInstance(querySearch: String): CourseSearchFragment {
+            val fragment = CourseSearchFragment()
+            fragment.arguments = bundleOf(
+                ARG_SEARCH_QUERY to querySearch
+            )
+            return fragment
+        }
+    }
 }
 
 
@@ -108,13 +163,18 @@ private fun CourseSearchScreen(
     windowSize: WindowSize,
     state: CourseSearchUIState,
     uiMessage: UIMessage?,
+    apiHostUrl: String,
     canLoadMore: Boolean,
     refreshing: Boolean,
+    querySearch: String,
+    isUserLoggedIn: Boolean,
     onBackClick: () -> Unit,
     onSearchTextChanged: (String) -> Unit,
     onSwipeRefresh: () -> Unit,
     paginationCallback: () -> Unit,
-    onItemClick: (String) -> Unit
+    onItemClick: (String) -> Unit,
+    onRegisterClick: () -> Unit,
+    onSignInClick: () -> Unit,
 ) {
     val scaffoldState = rememberScaffoldState()
     val scrollState = rememberLazyListState()
@@ -125,7 +185,12 @@ private fun CourseSearchScreen(
         rememberPullRefreshState(refreshing = refreshing, onRefresh = { onSwipeRefresh() })
 
     var textFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
-        mutableStateOf(TextFieldValue(""))
+        mutableStateOf(
+            TextFieldValue(
+                text = querySearch,
+                selection = TextRange(querySearch.length)
+            )
+        )
     }
     val keyboardController = LocalSoftwareKeyboardController.current
     val focusManager = LocalFocusManager.current
@@ -141,7 +206,23 @@ private fun CourseSearchScreen(
         modifier = Modifier
             .fillMaxSize()
             .navigationBarsPadding(),
-        backgroundColor = MaterialTheme.appColors.background
+        backgroundColor = MaterialTheme.appColors.background,
+        bottomBar = {
+            if (!isUserLoggedIn) {
+                Box(
+                    modifier = Modifier
+                        .padding(
+                            horizontal = 16.dp,
+                            vertical = 32.dp,
+                        )
+                ) {
+                    AuthButtonsPanel(
+                        onRegisterClick = onRegisterClick,
+                        onSignInClick = onSignInClick
+                    )
+                }
+            }
+        }
     ) {
 
         val screenWidth by remember(key1 = windowSize) {
@@ -285,9 +366,11 @@ private fun CourseSearchScreen(
                                         }
                                     }
                                 }
+
                                 is CourseSearchUIState.Courses -> {
                                     items(state.courses) { course ->
                                         DiscoveryCourseItem(
+                                            apiHostUrl = apiHostUrl,
                                             course,
                                             windowSize = windowSize,
                                             onClick = { courseId ->
@@ -323,6 +406,9 @@ private fun CourseSearchScreen(
             }
         }
     }
+    LaunchedEffect(rememberSaveable { true }) {
+        onSearchTextChanged(querySearch)
+    }
 }
 
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
@@ -334,13 +420,18 @@ fun CourseSearchScreenPreview() {
             windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
             state = CourseSearchUIState.Courses(listOf(mockCourse, mockCourse), 2),
             uiMessage = null,
+            apiHostUrl = "",
             canLoadMore = false,
             refreshing = false,
+            querySearch = "",
+            isUserLoggedIn = true,
             onBackClick = {},
             onSearchTextChanged = {},
             onSwipeRefresh = {},
             paginationCallback = {},
-            onItemClick = {}
+            onItemClick = {},
+            onSignInClick = {},
+            onRegisterClick = {},
         )
     }
 }
@@ -354,13 +445,18 @@ fun CourseSearchScreenTabletPreview() {
             windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
             state = CourseSearchUIState.Courses(listOf(mockCourse, mockCourse), 2),
             uiMessage = null,
+            apiHostUrl = "",
             canLoadMore = false,
             refreshing = false,
+            querySearch = "",
+            isUserLoggedIn = false,
             onBackClick = {},
             onSearchTextChanged = {},
             onSwipeRefresh = {},
             paginationCallback = {},
-            onItemClick = {}
+            onItemClick = {},
+            onSignInClick = {},
+            onRegisterClick = {},
         )
     }
 }
diff --git a/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchViewModel.kt b/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchViewModel.kt
index 3a8d2d43d..3dbb7c6b9 100644
--- a/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchViewModel.kt
+++ b/discovery/src/main/java/org/openedx/discovery/presentation/search/CourseSearchViewModel.kt
@@ -3,27 +3,34 @@ package org.openedx.discovery.presentation.search
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.FlowPreview
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.debounce
+import kotlinx.coroutines.launch
 import org.openedx.core.BaseViewModel
 import org.openedx.core.R
 import org.openedx.core.SingleEventLiveData
 import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
 import org.openedx.core.domain.model.Course
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.system.ResourceManager
 import org.openedx.discovery.domain.interactor.DiscoveryInteractor
 import org.openedx.discovery.presentation.DiscoveryAnalytics
-import kotlinx.coroutines.FlowPreview
-import kotlinx.coroutines.flow.MutableSharedFlow
-import kotlinx.coroutines.flow.asSharedFlow
-import kotlinx.coroutines.flow.debounce
-import kotlinx.coroutines.launch
 
 class CourseSearchViewModel(
+    private val config: Config,
+    private val corePreferences: CorePreferences,
     private val interactor: DiscoveryInteractor,
     private val resourceManager: ResourceManager,
     private val analytics: DiscoveryAnalytics
 ) : BaseViewModel() {
 
+    val apiHostUrl get() = config.getApiHostURL()
+    val isUserLoggedIn get() = corePreferences.user != null
+
     private val _uiState =
         MutableLiveData<CourseSearchUIState>(CourseSearchUIState.Courses(emptyList(), 0))
     val uiState: LiveData<CourseSearchUIState>
diff --git a/discovery/src/main/res/values/strings.xml b/discovery/src/main/res/values/strings.xml
index 543ce04a4..b6a6c16b8 100644
--- a/discovery/src/main/res/values/strings.xml
+++ b/discovery/src/main/res/values/strings.xml
@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
-<resources>
+<resources xmlns:tools="http://schemas.android.com/tools">
     <string name="discovery_Discovery">Discover</string>
     <string name="discovery_discovery_new">Discover new</string>
     <string name="discovery_lets_find">Let\'s find something new for you</string>
     <string name="discovery_search_results">Search results</string>
     <string name="discovery_start_typing_to_find">Start typing to find the course</string>
+    <string name="discovery_explore_the_catalog" tools:ignore="MissingTranslation">Explore the catalog</string>
 
     <plurals name="discovery_found_courses">
         <item quantity="zero">Found %s courses on your request</item>
@@ -14,4 +15,4 @@
         <item quantity="many">Found %s courses on your request</item>
         <item quantity="other">Found %s courses on your request</item>
     </plurals>
-</resources>
\ No newline at end of file
+</resources>
diff --git a/discovery/src/test/java/org/openedx/discovery/presentation/DiscoveryViewModelTest.kt b/discovery/src/test/java/org/openedx/discovery/presentation/NativeDiscoveryViewModelTest.kt
similarity index 78%
rename from discovery/src/test/java/org/openedx/discovery/presentation/DiscoveryViewModelTest.kt
rename to discovery/src/test/java/org/openedx/discovery/presentation/NativeDiscoveryViewModelTest.kt
index deb539ef8..3548b33ae 100644
--- a/discovery/src/test/java/org/openedx/discovery/presentation/DiscoveryViewModelTest.kt
+++ b/discovery/src/test/java/org/openedx/discovery/presentation/NativeDiscoveryViewModelTest.kt
@@ -1,19 +1,14 @@
 package org.openedx.discovery.presentation
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.CourseList
-import org.openedx.core.domain.model.Pagination
-import org.openedx.core.system.ResourceManager
-import org.openedx.core.system.connection.NetworkConnection
-import org.openedx.discovery.domain.interactor.DiscoveryInteractor
 import io.mockk.coEvery
 import io.mockk.coVerify
 import io.mockk.every
 import io.mockk.mockk
+import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.emptyFlow
 import kotlinx.coroutines.test.*
 import org.junit.After
 import org.junit.Assert.assertEquals
@@ -21,10 +16,20 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.domain.model.CourseList
+import org.openedx.core.domain.model.Pagination
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.connection.NetworkConnection
+import org.openedx.core.system.notifier.AppUpgradeNotifier
+import org.openedx.discovery.domain.interactor.DiscoveryInteractor
 import java.net.UnknownHostException
 
 @OptIn(ExperimentalCoroutinesApi::class)
-class DiscoveryViewModelTest {
+class NativeDiscoveryViewModelTest {
 
     @get:Rule
     val testInstantTaskExecutorRule: TestRule = InstantTaskExecutorRule()
@@ -32,10 +37,13 @@ class DiscoveryViewModelTest {
 
     private val dispatcher = StandardTestDispatcher()
 
+    private val config = mockk<Config>()
     private val resourceManager = mockk<ResourceManager>()
     private val interactor = mockk<DiscoveryInteractor>()
     private val networkConnection = mockk<NetworkConnection>()
     private val analytics = mockk<DiscoveryAnalytics>()
+    private val appUpgradeNotifier = mockk<AppUpgradeNotifier>()
+    private val corePreferences = mockk<CorePreferences>()
 
     private val noInternet = "Slow or no internet connection"
     private val somethingWrong = "Something went wrong"
@@ -45,6 +53,10 @@ class DiscoveryViewModelTest {
         Dispatchers.setMain(dispatcher)
         every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
+        every { appUpgradeNotifier.notifier } returns emptyFlow()
+        every { corePreferences.user } returns null
+        every { config.getApiHostURL() } returns "http://localhost:8000"
+        every { config.isPreLoginExperienceEnabled() } returns false
     }
 
     @After
@@ -54,14 +66,14 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `getCoursesList no internet connection`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getCoursesList(any(), any(), any()) } throws UnknownHostException()
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getCoursesList(any(), any(), any()) }
         coVerify(exactly = 0) { interactor.getCoursesListFromCache() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assertEquals(noInternet, message?.message)
@@ -71,8 +83,7 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `getCoursesList unknown exception`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getCoursesList(any(), any(), any()) } throws Exception()
         advanceUntilIdle()
@@ -88,8 +99,7 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `getCoursesList from cache`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns false
         coEvery { interactor.getCoursesListFromCache() } returns emptyList()
         advanceUntilIdle()
@@ -104,8 +114,7 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `getCoursesList from network with next page`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getCoursesList(any(), any(), any()) } returns CourseList(
             Pagination(
@@ -127,8 +136,7 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `getCoursesList from network without next page`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
         coEvery { interactor.getCoursesList(any(), any(), any()) } returns CourseList(
             Pagination(
@@ -151,10 +159,8 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `updateData no internet connection`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
-
         coEvery { interactor.getCoursesList(any(), any(), any()) } throws UnknownHostException()
         viewModel.updateData()
         advanceUntilIdle()
@@ -170,10 +176,8 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `updateData unknown exception`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
-
         coEvery { interactor.getCoursesList(any(), any(), any()) } throws Exception()
         viewModel.updateData()
         advanceUntilIdle()
@@ -189,10 +193,8 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `updateData success with next page`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
-
         coEvery { interactor.getCoursesList(any(), any(), any()) } returns CourseList(
             Pagination(
                 10,
@@ -214,10 +216,8 @@ class DiscoveryViewModelTest {
 
     @Test
     fun `updateData success without next page`() = runTest {
-        val viewModel =
-            DiscoveryViewModel(networkConnection, interactor, resourceManager, analytics)
+        val viewModel = NativeDiscoveryViewModel(config, networkConnection, interactor, resourceManager, analytics, appUpgradeNotifier, corePreferences)
         every { networkConnection.isOnline() } returns true
-
         coEvery { interactor.getCoursesList(any(), any(), any()) } returns CourseList(
             Pagination(
                 10,
@@ -237,5 +237,4 @@ class DiscoveryViewModelTest {
         assert(viewModel.uiState.value is DiscoveryUIState.Courses)
     }
 
-
-}
\ No newline at end of file
+}
diff --git a/discovery/src/test/java/org/openedx/discovery/presentation/search/CourseSearchViewModelTest.kt b/discovery/src/test/java/org/openedx/discovery/presentation/search/CourseSearchViewModelTest.kt
index 615e17f58..2acf8e123 100644
--- a/discovery/src/test/java/org/openedx/discovery/presentation/search/CourseSearchViewModelTest.kt
+++ b/discovery/src/test/java/org/openedx/discovery/presentation/search/CourseSearchViewModelTest.kt
@@ -1,28 +1,35 @@
 package org.openedx.discovery.presentation.search
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.core.domain.model.Course
-import org.openedx.core.domain.model.CourseList
-import org.openedx.core.domain.model.Media
-import org.openedx.core.domain.model.Pagination
-import org.openedx.core.system.ResourceManager
-import org.openedx.discovery.domain.interactor.DiscoveryInteractor
-import org.openedx.discovery.presentation.DiscoveryAnalytics
 import io.mockk.coEvery
 import io.mockk.coVerify
 import io.mockk.every
 import io.mockk.mockk
 import io.mockk.verify
-import kotlinx.coroutines.*
-import kotlinx.coroutines.test.*
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.test.UnconfinedTestDispatcher
+import kotlinx.coroutines.test.advanceUntilIdle
+import kotlinx.coroutines.test.resetMain
+import kotlinx.coroutines.test.runTest
+import kotlinx.coroutines.test.setMain
 import org.junit.After
-import org.junit.Assert.*
 import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.data.storage.CorePreferences
+import org.openedx.core.domain.model.Course
+import org.openedx.core.domain.model.CourseList
+import org.openedx.core.domain.model.Media
+import org.openedx.core.domain.model.Pagination
+import org.openedx.core.system.ResourceManager
+import org.openedx.discovery.domain.interactor.DiscoveryInteractor
+import org.openedx.discovery.presentation.DiscoveryAnalytics
 import java.net.UnknownHostException
 
 @OptIn(ExperimentalCoroutinesApi::class)
@@ -34,6 +41,8 @@ class CourseSearchViewModelTest {
 
     private val dispatcher = UnconfinedTestDispatcher()
 
+    private val config = mockk<Config>()
+    private val corePreferences = mockk<CorePreferences>()
     private val resourceManager = mockk<ResourceManager>()
     private val interactor = mockk<DiscoveryInteractor>()
     private val analytics = mockk<DiscoveryAnalytics>()
@@ -74,6 +83,7 @@ class CourseSearchViewModelTest {
         Dispatchers.setMain(dispatcher)
         every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
+        every { config.getApiHostURL() } returns "http://localhost:8000"
     }
 
     @After
@@ -83,7 +93,8 @@ class CourseSearchViewModelTest {
 
     @Test
     fun `search empty query`() = runTest {
-        val viewModel = CourseSearchViewModel(interactor, resourceManager, analytics)
+        val viewModel =
+            CourseSearchViewModel(config, corePreferences, interactor, resourceManager, analytics)
 
         viewModel.search("")
         advanceUntilIdle()
@@ -97,7 +108,8 @@ class CourseSearchViewModelTest {
 
     @Test
     fun `search query no internet connection exception`() = runTest {
-        val viewModel = CourseSearchViewModel(interactor, resourceManager, analytics)
+        val viewModel =
+            CourseSearchViewModel(config, corePreferences, interactor, resourceManager, analytics)
         coEvery { interactor.getCoursesListByQuery(any(), any()) } throws UnknownHostException()
 
         viewModel.search("course")
@@ -112,7 +124,8 @@ class CourseSearchViewModelTest {
 
     @Test
     fun `search query unknown exception`() = runTest {
-        val viewModel = CourseSearchViewModel(interactor, resourceManager, analytics)
+        val viewModel =
+            CourseSearchViewModel(config, corePreferences, interactor, resourceManager, analytics)
         coEvery { interactor.getCoursesListByQuery(any(), any()) } throws Exception()
 
         viewModel.search("course")
@@ -127,7 +140,8 @@ class CourseSearchViewModelTest {
 
     @Test
     fun `search query success without next page`() = runTest {
-        val viewModel = CourseSearchViewModel(interactor, resourceManager, analytics)
+        val viewModel =
+            CourseSearchViewModel(config, corePreferences, interactor, resourceManager, analytics)
         coEvery { interactor.getCoursesListByQuery(any(), any()) } returns CourseList(
             Pagination(
                 10,
@@ -152,7 +166,8 @@ class CourseSearchViewModelTest {
 
     @Test
     fun `search query success with next page and fetch`() = runTest {
-        val viewModel = CourseSearchViewModel(interactor, resourceManager, analytics)
+        val viewModel =
+            CourseSearchViewModel(config, corePreferences, interactor, resourceManager, analytics)
         coEvery { interactor.getCoursesListByQuery(any(), eq(1)) } returns CourseList(
             Pagination(
                 10,
@@ -186,7 +201,8 @@ class CourseSearchViewModelTest {
 
     @Test
     fun `search query success with next page and fetch, update`() = runTest {
-        val viewModel = CourseSearchViewModel(interactor, resourceManager, analytics)
+        val viewModel =
+            CourseSearchViewModel(config, corePreferences, interactor, resourceManager, analytics)
         coEvery { interactor.getCoursesListByQuery(any(), eq(1)) } returns CourseList(
             Pagination(
                 10,
@@ -221,7 +237,8 @@ class CourseSearchViewModelTest {
 
     @Test
     fun `search query update in empty state`() = runTest {
-        val viewModel = CourseSearchViewModel(interactor, resourceManager, analytics)
+        val viewModel =
+            CourseSearchViewModel(config, corePreferences, interactor, resourceManager, analytics)
         coEvery { interactor.getCoursesListByQuery(any(), eq(1)) } returns CourseList(
             Pagination(
                 10,
diff --git a/discussion/src/main/java/org/openedx/discussion/data/api/DiscussionApi.kt b/discussion/src/main/java/org/openedx/discussion/data/api/DiscussionApi.kt
index 6969522fe..ebc911425 100644
--- a/discussion/src/main/java/org/openedx/discussion/data/api/DiscussionApi.kt
+++ b/discussion/src/main/java/org/openedx/discussion/data/api/DiscussionApi.kt
@@ -98,7 +98,7 @@ interface DiscussionApi {
         @Query("requested_fields") requestedFields: List<String> = listOf("profile_image")
     ): CommentsResponse
 
-    @POST("/mobile_api_extensions/discussion/v1/comments/")
+    @POST("/api/discussion/v1/comments/")
     suspend fun createComment(
         @Body commentBody: CommentBody
     ) : CommentResult
diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/DiscussionRouter.kt b/discussion/src/main/java/org/openedx/discussion/presentation/DiscussionRouter.kt
index 71386a645..54f519004 100644
--- a/discussion/src/main/java/org/openedx/discussion/presentation/DiscussionRouter.kt
+++ b/discussion/src/main/java/org/openedx/discussion/presentation/DiscussionRouter.kt
@@ -37,4 +37,8 @@ interface DiscussionRouter {
         courseId: String
     )
 
+    fun navigateToAnothersProfile(
+        fm: FragmentManager,
+        username: String
+    )
 }
\ No newline at end of file
diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/comments/DiscussionCommentsFragment.kt b/discussion/src/main/java/org/openedx/discussion/presentation/comments/DiscussionCommentsFragment.kt
index 1a5b1315a..02f950bb6 100644
--- a/discussion/src/main/java/org/openedx/discussion/presentation/comments/DiscussionCommentsFragment.kt
+++ b/discussion/src/main/java/org/openedx/discussion/presentation/comments/DiscussionCommentsFragment.kt
@@ -27,6 +27,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
@@ -56,6 +58,7 @@ import org.openedx.discussion.presentation.ui.ThreadMainItem
 import org.koin.android.ext.android.inject
 import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.koin.core.parameter.parametersOf
+import org.openedx.discussion.R
 
 
 class DiscussionCommentsFragment : Fragment() {
@@ -121,6 +124,11 @@ class DiscussionCommentsFragment : Fragment() {
                             requireActivity().supportFragmentManager, it, viewModel.thread.closed
                         )
                     },
+                    onUserPhotoClick = { username ->
+                        router.navigateToAnothersProfile(
+                            requireActivity().supportFragmentManager, username
+                        )
+                    },
                     onAddResponseClick = {
                         viewModel.createComment(it)
                     },
@@ -167,7 +175,8 @@ private fun DiscussionCommentsScreen(
     onItemClick: (String, String, Boolean) -> Unit,
     onCommentClick: (DiscussionComment) -> Unit,
     onAddResponseClick: (String) -> Unit,
-    onBackClick: () -> Unit
+    onBackClick: () -> Unit,
+    onUserPhotoClick: (String) -> Unit
 ) {
     val scaffoldState = rememberScaffoldState()
     val scrollState = rememberLazyListState()
@@ -200,6 +209,8 @@ private fun DiscussionCommentsScreen(
             .navigationBarsPadding(),
         backgroundColor = MaterialTheme.appColors.background
     ) {
+        val keyboardController = LocalSoftwareKeyboardController.current
+        val focusManager = LocalFocusManager.current
 
         val screenWidth by remember(key1 = windowSize) {
             mutableStateOf(
@@ -236,7 +247,8 @@ private fun DiscussionCommentsScreen(
             ) {
                 Box(
                     modifier = Modifier
-                        .fillMaxWidth(),
+                        .fillMaxWidth()
+                        .displayCutoutForLandscape(),
                     contentAlignment = Alignment.CenterStart,
                 ) {
                     BackBtn {
@@ -271,6 +283,7 @@ private fun DiscussionCommentsScreen(
                                     Modifier
                                         .then(screenWidth)
                                         .weight(1f)
+                                        .displayCutoutForLandscape()
                                         .background(MaterialTheme.appColors.background),
                                     verticalArrangement = Arrangement.spacedBy(16.dp),
                                     horizontalAlignment = Alignment.CenterHorizontally,
@@ -287,7 +300,11 @@ private fun DiscussionCommentsScreen(
                                             thread = uiState.thread,
                                             onClick = { action, bool ->
                                                 onItemClick(action, uiState.thread.id, bool)
-                                            })
+                                            },
+                                            onUserPhotoClick = { username ->
+                                                onUserPhotoClick(username)
+                                            }
+                                        )
                                     }
                                     if (uiState.commentsData.isNotEmpty()) {
                                         item {
@@ -320,6 +337,9 @@ private fun DiscussionCommentsScreen(
                                             },
                                             onAddCommentClick = {
                                                 onCommentClick(comment)
+                                            },
+                                            onUserPhotoClick = {
+                                                onUserPhotoClick(comment.author)
                                             })
                                     }
                                     item {
@@ -350,7 +370,8 @@ private fun DiscussionCommentsScreen(
                                             .then(screenWidth)
                                             .heightIn(84.dp, Dp.Unspecified)
                                             .padding(top = 16.dp, bottom = 24.dp)
-                                            .padding(horizontal = 24.dp),
+                                            .padding(horizontal = 24.dp)
+                                            .displayCutoutForLandscape(),
                                         verticalAlignment = Alignment.CenterVertically,
                                         horizontalArrangement = Arrangement.spacedBy(12.dp)
                                     ) {
@@ -367,7 +388,7 @@ private fun DiscussionCommentsScreen(
                                             maxLines = 3,
                                             placeholder = {
                                                 Text(
-                                                    text = stringResource(id = org.openedx.discussion.R.string.discussion_add_response),
+                                                    text = stringResource(id = R.string.discussion_add_response),
                                                     color = MaterialTheme.appColors.textFieldHint,
                                                     style = MaterialTheme.appTypography.labelLarge,
                                                 )
@@ -385,6 +406,8 @@ private fun DiscussionCommentsScreen(
                                                 .clip(CircleShape)
                                                 .background(sendButtonColor)
                                                 .clickable {
+                                                    keyboardController?.hide()
+                                                    focusManager.clearFocus()
                                                     if (responseValue.isNotEmpty()) {
                                                         onAddResponseClick(responseValue.trim())
                                                         responseValue = ""
@@ -394,8 +417,8 @@ private fun DiscussionCommentsScreen(
                                         ) {
                                             Icon(
                                                 modifier = Modifier.padding(7.dp),
-                                                painter = painterResource(id = org.openedx.discussion.R.drawable.discussion_ic_send),
-                                                contentDescription = null,
+                                                painter = painterResource(id = R.drawable.discussion_ic_send),
+                                                contentDescription = stringResource(id = R.string.discussion_add_response),
                                                 tint = iconButtonColor
                                             )
                                         }
@@ -403,6 +426,7 @@ private fun DiscussionCommentsScreen(
                                 }
                             }
                         }
+
                         is DiscussionCommentsUIState.Loading -> {
                             Box(
                                 Modifier
@@ -450,7 +474,8 @@ private fun DiscussionCommentsScreenPreview() {
             onBackClick = {},
             scrollToBottom = false,
             refreshing = false,
-            onSwipeRefresh = {}
+            onSwipeRefresh = {},
+            onUserPhotoClick = {}
         )
     }
 }
@@ -480,7 +505,8 @@ private fun DiscussionCommentsScreenTabletPreview() {
             onBackClick = {},
             scrollToBottom = false,
             refreshing = false,
-            onSwipeRefresh = {}
+            onSwipeRefresh = {},
+            onUserPhotoClick = {}
         )
     }
 }
diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/responses/DiscussionResponsesFragment.kt b/discussion/src/main/java/org/openedx/discussion/presentation/responses/DiscussionResponsesFragment.kt
index 169b65b97..cafcf1cb2 100644
--- a/discussion/src/main/java/org/openedx/discussion/presentation/responses/DiscussionResponsesFragment.kt
+++ b/discussion/src/main/java/org/openedx/discussion/presentation/responses/DiscussionResponsesFragment.kt
@@ -27,6 +27,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
@@ -39,6 +41,9 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.koin.android.ext.android.inject
 import org.openedx.core.UIMessage
 import org.openedx.core.domain.model.ProfileImage
 import org.openedx.core.extension.TextConverter
@@ -51,8 +56,7 @@ import org.openedx.core.ui.theme.appTypography
 import org.openedx.discussion.domain.model.DiscussionComment
 import org.openedx.discussion.presentation.comments.DiscussionCommentsFragment
 import org.openedx.discussion.presentation.ui.CommentMainItem
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
+import org.openedx.discussion.presentation.DiscussionRouter
 import org.openedx.discussion.R as discussionR
 
 class DiscussionResponsesFragment : Fragment() {
@@ -61,6 +65,8 @@ class DiscussionResponsesFragment : Fragment() {
         parametersOf(requireArguments().parcelable(ARG_COMMENT))
     }
 
+    private val router by inject<DiscussionRouter>()
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         lifecycle.addObserver(viewModel)
@@ -118,6 +124,11 @@ class DiscussionResponsesFragment : Fragment() {
                     },
                     onBackClick = {
                         requireActivity().supportFragmentManager.popBackStack()
+                    },
+                    onUserPhotoClick = { username ->
+                        router.navigateToAnothersProfile(
+                            requireActivity().supportFragmentManager, username
+                        )
                     }
                 )
             }
@@ -156,9 +167,13 @@ private fun DiscussionResponsesScreen(
     onItemClick: (String, String, Boolean) -> Unit,
     addCommentClick: (String) -> Unit,
     onBackClick: () -> Unit,
+    onUserPhotoClick: (String) -> Unit
 ) {
     val scaffoldState = rememberScaffoldState()
     val scrollState = rememberLazyListState()
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
     val firstVisibleIndex = remember {
         mutableStateOf(scrollState.firstVisibleItemIndex)
     }
@@ -232,7 +247,8 @@ private fun DiscussionResponsesScreen(
             ) {
                 Box(
                     modifier = Modifier
-                        .fillMaxWidth(),
+                        .fillMaxWidth()
+                        .displayCutoutForLandscape(),
                     contentAlignment = Alignment.CenterStart,
                 ) {
                     BackBtn {
@@ -266,7 +282,8 @@ private fun DiscussionResponsesScreen(
                                 Column(
                                     Modifier
                                         .fillMaxWidth()
-                                        .weight(1f),
+                                        .weight(1f)
+                                        .displayCutoutForLandscape(),
                                     horizontalAlignment = Alignment.CenterHorizontally
                                 ) {
                                     LazyColumn(
@@ -290,7 +307,11 @@ private fun DiscussionResponsesScreen(
                                                         uiState.mainComment.id,
                                                         bool
                                                     )
-                                                })
+                                                },
+                                                onUserPhotoClick = {username ->
+                                                    onUserPhotoClick(username)
+                                                }
+                                            )
                                         }
                                         if (uiState.mainComment.childCount > 0) {
                                             item {
@@ -332,7 +353,11 @@ private fun DiscussionResponsesScreen(
                                                     comment = comment,
                                                     onClick = { action, commentId, bool ->
                                                         onItemClick(action, commentId, bool)
-                                                    })
+                                                    },
+                                                    onUserPhotoClick = {username ->
+                                                        onUserPhotoClick(username)
+                                                    }
+                                                )
                                             }
                                         }
                                         item {
@@ -364,7 +389,8 @@ private fun DiscussionResponsesScreen(
                                             .then(screenWidth)
                                             .heightIn(84.dp, Dp.Unspecified)
                                             .padding(top = 16.dp, bottom = 24.dp)
-                                            .padding(horizontal = 24.dp),
+                                            .padding(horizontal = 24.dp)
+                                            .displayCutoutForLandscape(),
                                         verticalAlignment = Alignment.CenterVertically,
                                         horizontalArrangement = Arrangement.spacedBy(12.dp)
                                     ) {
@@ -399,6 +425,8 @@ private fun DiscussionResponsesScreen(
                                                 .clip(CircleShape)
                                                 .background(sendButtonColor)
                                                 .clickable {
+                                                    keyboardController?.hide()
+                                                    focusManager.clearFocus()
                                                     if (commentValue.isNotEmpty()) {
                                                         addCommentClick(commentValue.trim())
                                                         commentValue = ""
@@ -464,7 +492,8 @@ private fun DiscussionResponsesScreenPreview() {
 
             },
             onBackClick = {},
-            isClosed = false
+            isClosed = false,
+            onUserPhotoClick = {}
         )
     }
 }
@@ -494,7 +523,8 @@ private fun DiscussionResponsesScreenTabletPreview() {
 
             },
             onBackClick = {},
-            isClosed = false
+            isClosed = false,
+            onUserPhotoClick = {}
         )
     }
 }
diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionAddThreadFragment.kt b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionAddThreadFragment.kt
index 9cffcd75a..dda5a41f4 100644
--- a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionAddThreadFragment.kt
+++ b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionAddThreadFragment.kt
@@ -236,7 +236,8 @@ private fun DiscussionAddThreadScreen(
                 modifier = Modifier
                     .fillMaxSize()
                     .padding(it)
-                    .statusBarsInset(),
+                    .statusBarsInset()
+                    .displayCutoutForLandscape(),
                 contentAlignment = Alignment.TopCenter
             ) {
                 Column(
diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt
index 7922919fa..99bf4f26e 100644
--- a/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt
+++ b/discussion/src/main/java/org/openedx/discussion/presentation/threads/DiscussionThreadsFragment.kt
@@ -10,9 +10,10 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
-
 import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
@@ -24,7 +25,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.ViewCompositionStrategy
@@ -39,6 +39,10 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import kotlinx.coroutines.launch
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.FragmentViewType
 import org.openedx.core.UIMessage
 import org.openedx.core.extension.TextConverter
@@ -47,10 +51,6 @@ import org.openedx.core.ui.theme.*
 import org.openedx.discussion.domain.model.DiscussionType
 import org.openedx.discussion.presentation.DiscussionRouter
 import org.openedx.discussion.presentation.ui.ThreadItem
-import kotlinx.coroutines.launch
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
 import org.openedx.discussion.R as discussionR
 
 class DiscussionThreadsFragment : Fragment() {
@@ -332,6 +332,7 @@ private fun DiscussionThreadsScreen(
                 modifier = Modifier
                     .fillMaxSize()
                     .padding(it)
+                    .displayCutoutForLandscape()
                     .then(statusBarInsets),
                 contentAlignment = Alignment.TopCenter
             ) {
@@ -483,7 +484,7 @@ private fun DiscussionThreadsScreen(
                                                                 Icon(
                                                                     modifier = Modifier.size(16.dp),
                                                                     painter = painterResource(id = discussionR.drawable.discussion_ic_add_comment),
-                                                                    contentDescription = null,
+                                                                    contentDescription = stringResource(id = discussionR.string.discussion_add_comment),
                                                                     tint = MaterialTheme.appColors.buttonText
                                                                 )
                                                             }
@@ -516,69 +517,69 @@ private fun DiscussionThreadsScreen(
                                                     }
                                                 }
                                             } else {
-                                                Box(
-                                                    modifier = Modifier.fillMaxSize(),
-                                                    contentAlignment = Alignment.TopStart
+                                                val noDiscussionsScrollState = rememberScrollState()
+                                                Column(
+                                                    modifier = Modifier
+                                                        .align(Alignment.CenterHorizontally)
+                                                        .verticalScroll(noDiscussionsScrollState)
+                                                        .padding(24.dp),
+                                                    horizontalAlignment = Alignment.CenterHorizontally,
+                                                    verticalArrangement = Arrangement.Center
                                                 ) {
                                                     Text(
                                                         modifier = Modifier
-                                                            .padding(start = 24.dp, top = 32.dp),
+                                                            .fillMaxWidth(),
                                                         text = title,
                                                         color = MaterialTheme.appColors.textPrimary,
                                                         style = MaterialTheme.appTypography.titleLarge
                                                     )
-                                                    Column(
-                                                        modifier = Modifier.align(Alignment.Center),
-                                                        horizontalAlignment = Alignment.CenterHorizontally,
-                                                        verticalArrangement = Arrangement.Center
-                                                    ) {
-                                                        Icon(
-                                                            modifier = Modifier.size(100.dp),
-                                                            painter = painterResource(id = discussionR.drawable.discussion_ic_empty),
-                                                            contentDescription = null,
-                                                            tint = MaterialTheme.appColors.textPrimary
-                                                        )
-                                                        Spacer(Modifier.height(36.dp))
-                                                        Text(
-                                                            modifier = Modifier.fillMaxWidth(),
-                                                            text = stringResource(discussionR.string.discussion_no_yet),
-                                                            style = MaterialTheme.appTypography.titleLarge,
-                                                            color = MaterialTheme.appColors.textPrimary,
-                                                            textAlign = TextAlign.Center
-                                                        )
-                                                        Spacer(Modifier.height(12.dp))
-                                                        Text(
-                                                            modifier = Modifier.fillMaxWidth(),
-                                                            text = stringResource(discussionR.string.discussion_click_button_create_discussion),
-                                                            style = MaterialTheme.appTypography.bodyLarge,
-                                                            color = MaterialTheme.appColors.textPrimary,
-                                                            textAlign = TextAlign.Center
-                                                        )
-                                                        Spacer(Modifier.height(40.dp))
-                                                        OpenEdXOutlinedButton(
-                                                            modifier = Modifier
-                                                                .widthIn(184.dp, Dp.Unspecified),
-                                                            text = stringResource(id = discussionR.string.discussion_create_post),
-                                                            onClick = {
-                                                                onCreatePostClick()
-                                                            },
-                                                            content = {
-                                                                Icon(
-                                                                    painter = painterResource(id = discussionR.drawable.discussion_ic_add_comment),
-                                                                    contentDescription = null,
-                                                                    tint = MaterialTheme.appColors.primary
-                                                                )
-                                                                Spacer(modifier = Modifier.width(6.dp))
-                                                                Text(
-                                                                    text = stringResource(id = discussionR.string.discussion_create_post),
-                                                                    color = MaterialTheme.appColors.primary,
-                                                                    style = MaterialTheme.appTypography.labelLarge
-                                                                )
-                                                            },
-                                                            borderColor = MaterialTheme.appColors.primary,
-                                                            textColor = MaterialTheme.appColors.primary
-                                                        )
-                                                    }
+                                                    Spacer(modifier = Modifier.height(20.dp))
+                                                    Icon(
+                                                        modifier = Modifier.size(100.dp),
+                                                        painter = painterResource(id = discussionR.drawable.discussion_ic_empty),
+                                                        contentDescription = null,
+                                                        tint = MaterialTheme.appColors.textPrimary
+                                                    )
+                                                    Spacer(Modifier.height(36.dp))
+                                                    Text(
+                                                        modifier = Modifier.fillMaxWidth(),
+                                                        text = stringResource(discussionR.string.discussion_no_yet),
+                                                        style = MaterialTheme.appTypography.titleLarge,
+                                                        color = MaterialTheme.appColors.textPrimary,
+                                                        textAlign = TextAlign.Center
+                                                    )
+                                                    Spacer(Modifier.height(12.dp))
+                                                    Text(
+                                                        modifier = Modifier.fillMaxWidth(),
+                                                        text = stringResource(discussionR.string.discussion_click_button_create_discussion),
+                                                        style = MaterialTheme.appTypography.bodyLarge,
+                                                        color = MaterialTheme.appColors.textPrimary,
+                                                        textAlign = TextAlign.Center
+                                                    )
+                                                    Spacer(Modifier.height(40.dp))
+                                                    OpenEdXOutlinedButton(
+                                                        modifier = Modifier
+                                                            .widthIn(184.dp, Dp.Unspecified),
+                                                        text = stringResource(id = discussionR.string.discussion_create_post),
+                                                        onClick = {
+                                                            onCreatePostClick()
+                                                        },
+                                                        content = {
+                                                            Icon(
+                                                                painter = painterResource(id = discussionR.drawable.discussion_ic_add_comment),
+                                                                contentDescription = null,
+                                                                tint = MaterialTheme.appColors.primary
+                                                            )
+                                                            Spacer(modifier = Modifier.width(6.dp))
+                                                            Text(
+                                                                text = stringResource(id = discussionR.string.discussion_create_post),
+                                                                color = MaterialTheme.appColors.primary,
+                                                                style = MaterialTheme.appTypography.labelLarge
+                                                            )
+                                                        },
+                                                        borderColor = MaterialTheme.appColors.primary,
+                                                        textColor = MaterialTheme.appColors.primary
+                                                    )
                                                 }
                                             }
                                         }
diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/topics/DiscussionTopicsFragment.kt b/discussion/src/main/java/org/openedx/discussion/presentation/topics/DiscussionTopicsFragment.kt
index 6d2d7d4f1..7d386a2e8 100644
--- a/discussion/src/main/java/org/openedx/discussion/presentation/topics/DiscussionTopicsFragment.kt
+++ b/discussion/src/main/java/org/openedx/discussion/presentation/topics/DiscussionTopicsFragment.kt
@@ -24,13 +24,15 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.core.os.bundleOf
 import androidx.fragment.app.Fragment
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
 import org.openedx.core.FragmentViewType
 import org.openedx.core.UIMessage
 import org.openedx.core.ui.*
@@ -42,9 +44,6 @@ import org.openedx.discussion.domain.model.Topic
 import org.openedx.discussion.presentation.DiscussionRouter
 import org.openedx.discussion.presentation.ui.ThreadItemCategory
 import org.openedx.discussion.presentation.ui.TopicItem
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.koin.core.parameter.parametersOf
 import org.openedx.discussion.R as discussionR
 
 class DiscussionTopicsFragment : Fragment() {
@@ -97,9 +96,6 @@ class DiscussionTopicsFragment : Fragment() {
                             requireActivity().supportFragmentManager,
                             viewModel.courseId
                         )
-                    },
-                    onBackClick = {
-                        requireActivity().supportFragmentManager.popBackStack()
                     }
                 )
             }
@@ -136,8 +132,7 @@ private fun DiscussionTopicsScreen(
     refreshing: Boolean,
     onSearchClick: () -> Unit,
     onSwipeRefresh: () -> Unit,
-    onItemClick: (String, String, String) -> Unit,
-    onBackClick: () -> Unit
+    onItemClick: (String, String, String) -> Unit
 ) {
     val scaffoldState = rememberScaffoldState()
     val context = LocalContext.current
@@ -192,45 +187,20 @@ private fun DiscussionTopicsScreen(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(it)
-                .statusBarsInset(),
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
             contentAlignment = Alignment.TopCenter
         ) {
             Column(screenWidth) {
-                Column(
+                StaticSearchBar(
                     modifier = Modifier
+                        .height(48.dp)
+                        .then(searchTabWidth)
+                        .padding(horizontal = contentPaddings)
                         .fillMaxWidth(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
-                ) {
-                    Box(
-                        modifier = Modifier
-                            .fillMaxWidth(),
-                        contentAlignment = Alignment.CenterStart
-                    ) {
-                        Text(
-                            modifier = Modifier
-                                .fillMaxWidth(),
-                            text = stringResource(id = discussionR.string.discussion_discussions),
-                            color = MaterialTheme.appColors.textPrimary,
-                            textAlign = TextAlign.Center,
-                            style = MaterialTheme.appTypography.titleMedium
-                        )
-
-                        BackBtn {
-                            onBackClick()
-                        }
-                    }
-                    Spacer(modifier = Modifier.height(16.dp))
-                    StaticSearchBar(
-                        modifier = Modifier
-                            .height(48.dp)
-                            .then(searchTabWidth)
-                            .padding(horizontal = contentPaddings),
-                        text = stringResource(id = discussionR.string.discussion_search_all_posts),
-                        onClick = onSearchClick
-                    )
-
-                }
+                    text = stringResource(id = discussionR.string.discussion_search_all_posts),
+                    onClick = onSearchClick
+                )
                 Surface(
                     modifier = Modifier.padding(top = 10.dp),
                     color = MaterialTheme.appColors.background,
@@ -353,7 +323,6 @@ private fun DiscussionTopicsScreenPreview() {
             uiMessage = null,
             refreshing = false,
             onItemClick = { _, _, _ -> },
-            onBackClick = {},
             onSwipeRefresh = {},
             onSearchClick = {}
         )
@@ -371,7 +340,6 @@ private fun DiscussionTopicsScreenTabletPreview() {
             uiMessage = null,
             refreshing = false,
             onItemClick = { _, _, _ -> },
-            onBackClick = {},
             onSwipeRefresh = {},
             onSearchClick = {}
         )
diff --git a/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt b/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt
index 0d146692a..285b01d66 100644
--- a/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt
+++ b/discussion/src/main/java/org/openedx/discussion/presentation/ui/DiscussionUI.kt
@@ -53,6 +53,7 @@ fun ThreadMainItem(
     modifier: Modifier,
     thread: org.openedx.discussion.domain.model.Thread,
     onClick: (String, Boolean) -> Unit,
+    onUserPhotoClick: (String) -> Unit
 ) {
     val profileImageUrl = if (thread.users?.get(thread.author)?.image?.hasImage == true) {
         thread.users[thread.author]?.image?.imageUrlFull
@@ -93,14 +94,25 @@ fun ThreadMainItem(
                     .error(org.openedx.core.R.drawable.core_ic_default_profile_picture)
                     .placeholder(org.openedx.core.R.drawable.core_ic_default_profile_picture)
                     .build(),
-                contentDescription = null,
+                contentDescription = stringResource(id = org.openedx.core.R.string.core_accessibility_user_profile_image, thread.author),
                 modifier = Modifier
                     .size(48.dp)
                     .clip(MaterialTheme.appShapes.material.medium)
+                    .clickable {
+                        if (thread.author.isNotEmpty()) {
+                            onUserPhotoClick(thread.author)
+                        }
+                    }
             )
             Spacer(Modifier.width(16.dp))
             Column(
-                modifier = Modifier.weight(1f),
+                modifier = Modifier
+                    .weight(1f)
+                    .clickable {
+                        if (thread.author.isNotEmpty()) {
+                            onUserPhotoClick(thread.author)
+                        }
+                    },
                 verticalArrangement = Arrangement.spacedBy(4.dp)
             ) {
                 Text(
@@ -172,6 +184,7 @@ fun CommentItem(
     shape: Shape = MaterialTheme.appShapes.cardShape,
     onClick: (String, String, Boolean) -> Unit,
     onAddCommentClick: () -> Unit = {},
+    onUserPhotoClick: (String) -> Unit
 ) {
     val profileImageUrl = if (comment.profileImage?.hasImage == true) {
         comment.profileImage.imageUrlFull
@@ -232,15 +245,21 @@ fun CommentItem(
                         .error(org.openedx.core.R.drawable.core_ic_default_profile_picture)
                         .placeholder(org.openedx.core.R.drawable.core_ic_default_profile_picture)
                         .build(),
-                    contentDescription = null,
+                    contentDescription = stringResource(id = org.openedx.core.R.string.core_accessibility_user_profile_image, comment.author),
                     modifier = Modifier
                         .size(32.dp)
                         .clip(CircleShape)
-
+                        .clickable {
+                            onUserPhotoClick(comment.author)
+                        }
                 )
                 Spacer(Modifier.width(12.dp))
                 Column(
-                    modifier = Modifier.weight(1f),
+                    modifier = Modifier
+                        .weight(1f)
+                        .clickable {
+                            onUserPhotoClick(comment.author)
+                        },
                     verticalArrangement = Arrangement.spacedBy(4.dp)
                 ) {
                     Text(
@@ -323,6 +342,7 @@ fun CommentMainItem(
     internalPadding: Dp = 16.dp,
     comment: DiscussionComment,
     onClick: (String, String, Boolean) -> Unit,
+    onUserPhotoClick: (String) -> Unit
 ) {
     val profileImageUrl = if (comment.profileImage?.hasImage == true) {
         comment.profileImage.imageUrlFull
@@ -375,15 +395,21 @@ fun CommentMainItem(
                         .error(org.openedx.core.R.drawable.core_ic_default_profile_picture)
                         .placeholder(org.openedx.core.R.drawable.core_ic_default_profile_picture)
                         .build(),
-                    contentDescription = null,
+                    contentDescription = stringResource(id = org.openedx.core.R.string.core_accessibility_user_profile_image, comment.author),
                     modifier = Modifier
                         .size(32.dp)
                         .clip(CircleShape)
-
+                        .clickable {
+                            onUserPhotoClick(comment.author)
+                        }
                 )
                 Spacer(Modifier.width(12.dp))
                 Column(
-                    modifier = Modifier.weight(1f),
+                    modifier = Modifier
+                        .weight(1f)
+                        .clickable {
+                            onUserPhotoClick(comment.author)
+                        },
                     verticalArrangement = Arrangement.spacedBy(4.dp)
                 ) {
                     Text(
@@ -478,8 +504,7 @@ fun ThreadItem(
                 text = textType,
                 painter = icon,
                 color = MaterialTheme.appColors.textPrimaryVariant,
-                textStyle = MaterialTheme.appTypography.labelSmall,
-                onClick = {})
+                textStyle = MaterialTheme.appTypography.labelSmall)
             if (thread.unreadCommentCount > 0 && !thread.read) {
                 Row(
                     modifier = Modifier,
@@ -537,8 +562,7 @@ fun ThreadItem(
             ),
             painter = painterResource(id = R.drawable.discussion_ic_responses),
             color = MaterialTheme.appColors.textAccent,
-            textStyle = MaterialTheme.appTypography.labelLarge,
-            onClick = {})
+            textStyle = MaterialTheme.appTypography.labelLarge)
     }
 
 }
@@ -642,9 +666,9 @@ private fun CommentItemPreview() {
         CommentItem(
             modifier = Modifier.fillMaxWidth(),
             comment = mockComment,
-            onClick = { _, _, _ ->
-
-            })
+            onClick = { _, _, _ -> },
+            onUserPhotoClick = {}
+        )
     }
 }
 
@@ -653,9 +677,10 @@ private fun CommentItemPreview() {
 private fun ThreadMainItemPreview() {
     ThreadMainItem(
         modifier = Modifier.fillMaxWidth(),
-        thread = mockThread, onClick = { _, _ ->
-
-        })
+        thread = mockThread,
+        onClick = { _, _ -> },
+        onUserPhotoClick = {}
+    )
 }
 
 private val mockComment = DiscussionComment(
diff --git a/docs/0001-strategy-for-data-streams.rst b/docs/0001-strategy-for-data-streams.rst
new file mode 100644
index 000000000..9fb98ac10
--- /dev/null
+++ b/docs/0001-strategy-for-data-streams.rst
@@ -0,0 +1,49 @@
+Title: Strategy for asynchronous data streams in the OpenEdx Project
+==================================================
+Date: 14 November 2023
+
+Status
+------
+Accepted
+
+Context
+------
+In the OpenEdx project, we are developing a mobile application using a Kotlin language for Android
+users. To ensure optimal support of the application, we need to make a decision regarding which
+asynchronous data streams will be used for the future Android app development. This document
+outlines the decision to support native Kotlin based StateFlow and SharedFlow.
+
+Decision
+------
+We decide to use StateFlow and SharedFlow for asynchronous data streams management between UI and view
+models. All new features should use flows instead of LiveData. All LiveData occurrences in current code
+should be replaced with flows in future.
+
+Why is this important?
+
+1. Deep Kotlin integration
+------
+Flow is tightly integrated with Kotlin Coroutines. Code parts which are using Kotlin Coroutines is
+usual use flows, we don't need to map data to another format and could use it as is.
+
+2. Decreasing dependencies count
+------
+If we are using language based choose, we don't need to add additional dependencies to our code.
+
+Project Impact
+------
+
+This decision will impact the project in the following ways:
+------
+Improved performance and functionality.
+Reducing application size.
+
+Implementation
+------
+To implement this decision, we will use flows as asynchronous data streams for future development.
+We will replace LiveData with flows during refactoring
+
+Alternatives
+------
+Continuing to use LiveData as asynchronous data streams, will keep job to us to maintain LiveData
+library updates.
\ No newline at end of file
diff --git a/profile/src/main/java/org/openedx/profile/data/api/ProfileApi.kt b/profile/src/main/java/org/openedx/profile/data/api/ProfileApi.kt
index cfe14bdf4..1b9bb6750 100644
--- a/profile/src/main/java/org/openedx/profile/data/api/ProfileApi.kt
+++ b/profile/src/main/java/org/openedx/profile/data/api/ProfileApi.kt
@@ -42,7 +42,7 @@ interface ProfileApi {
     suspend fun deleteProfileImage(@Path("username") username: String?): Response<Unit>
 
     @FormUrlEncoded
-    @POST("/mobile_api_extensions/user/v1/accounts/deactivate_logout/")
+    @POST("/api/user/v1/accounts/deactivate_logout/")
     suspend fun deactivateAccount(
         @Field("password") password: String
     ): Response<Unit>
diff --git a/profile/src/main/java/org/openedx/profile/data/model/Account.kt b/profile/src/main/java/org/openedx/profile/data/model/Account.kt
index c3fe9304e..ff069376a 100644
--- a/profile/src/main/java/org/openedx/profile/data/model/Account.kt
+++ b/profile/src/main/java/org/openedx/profile/data/model/Account.kt
@@ -60,7 +60,9 @@ data class Account(
             yearOfBirth = yearOfBirth,
             levelOfEducation = levelOfEducation ?: "",
             goals = goals ?: "",
-            languageProficiencies = languageProficiencies!!.map { it.mapToDomain() },
+            languageProficiencies = languageProficiencies?.let { languageProficiencyList ->
+                languageProficiencyList.map { it.mapToDomain() }
+            } ?: emptyList(),
             gender = gender ?: "",
             mailingAddress = mailingAddress ?: "",
             email = email,
diff --git a/profile/src/main/java/org/openedx/profile/data/repository/ProfileRepository.kt b/profile/src/main/java/org/openedx/profile/data/repository/ProfileRepository.kt
index 7e64c98cc..ce5580a45 100644
--- a/profile/src/main/java/org/openedx/profile/data/repository/ProfileRepository.kt
+++ b/profile/src/main/java/org/openedx/profile/data/repository/ProfileRepository.kt
@@ -1,31 +1,46 @@
 package org.openedx.profile.data.repository
 
 import androidx.room.RoomDatabase
-import org.openedx.core.ApiConstants
-import org.openedx.profile.data.api.ProfileApi
 import okhttp3.MediaType.Companion.toMediaType
 import okhttp3.RequestBody.Companion.asRequestBody
+import org.openedx.core.ApiConstants
+import org.openedx.core.config.Config
 import org.openedx.core.data.storage.CorePreferences
+import org.openedx.profile.data.api.ProfileApi
+import org.openedx.profile.data.storage.ProfilePreferences
 import org.openedx.profile.domain.model.Account
 import java.io.File
 
 class ProfileRepository(
+    private val config: Config,
     private val api: ProfileApi,
     private val room: RoomDatabase,
-    private val preferencesManager: CorePreferences
+    private val profilePreferences: ProfilePreferences,
+    private val corePreferences: CorePreferences,
 ) {
 
     suspend fun getAccount(): Account {
-        return api.getAccount(preferencesManager.user?.username!!).mapToDomain()
+        val account = api.getAccount(corePreferences.user?.username!!)
+        profilePreferences.profile = account
+        return account.mapToDomain()
+    }
+
+    suspend fun getAccount(username: String): Account {
+        val account = api.getAccount(username)
+        return account.mapToDomain()
+    }
+
+    fun getCachedAccount(): Account? {
+        return profilePreferences.profile?.mapToDomain()
     }
 
     suspend fun updateAccount(fields: Map<String, Any?>): Account {
-        return api.updateAccount(preferencesManager.user?.username!!, fields).mapToDomain()
+        return api.updateAccount(corePreferences.user?.username!!, fields).mapToDomain()
     }
 
     suspend fun setProfileImage(file: File, mimeType: String) {
         api.setProfileImage(
-            preferencesManager.user?.username!!,
+            corePreferences.user?.username!!,
             "attachment;filename=filename.${file.extension}",
             true,
             file.asRequestBody(mimeType.toMediaType())
@@ -33,18 +48,21 @@ class ProfileRepository(
     }
 
     suspend fun deleteProfileImage() {
-        api.deleteProfileImage(preferencesManager.user?.username!!)
+        api.deleteProfileImage(corePreferences.user?.username!!)
     }
 
     suspend fun deactivateAccount(password: String) = api.deactivateAccount(password)
 
     suspend fun logout() {
-        api.revokeAccessToken(
-            org.openedx.core.BuildConfig.CLIENT_ID,
-            preferencesManager.refreshToken,
-            ApiConstants.TOKEN_TYPE_REFRESH
-        )
-        preferencesManager.clear()
-        room.clearAllTables()
+        try {
+            api.revokeAccessToken(
+                config.getOAuthClientId(),
+                corePreferences.refreshToken,
+                ApiConstants.TOKEN_TYPE_REFRESH
+            )
+        } finally {
+            corePreferences.clear()
+            room.clearAllTables()
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/profile/src/main/java/org/openedx/profile/data/storage/ProfilePreferences.kt b/profile/src/main/java/org/openedx/profile/data/storage/ProfilePreferences.kt
index 857c1d769..aba477e0a 100644
--- a/profile/src/main/java/org/openedx/profile/data/storage/ProfilePreferences.kt
+++ b/profile/src/main/java/org/openedx/profile/data/storage/ProfilePreferences.kt
@@ -1,6 +1,6 @@
 package org.openedx.profile.data.storage
 
-import org.openedx.profile.domain.model.Account
+import org.openedx.profile.data.model.Account
 
 interface ProfilePreferences {
     var profile: Account?
diff --git a/profile/src/main/java/org/openedx/profile/domain/interactor/ProfileInteractor.kt b/profile/src/main/java/org/openedx/profile/domain/interactor/ProfileInteractor.kt
index 1364c7370..cbad3b4fe 100644
--- a/profile/src/main/java/org/openedx/profile/domain/interactor/ProfileInteractor.kt
+++ b/profile/src/main/java/org/openedx/profile/domain/interactor/ProfileInteractor.kt
@@ -7,6 +7,10 @@ class ProfileInteractor(private val repository: ProfileRepository) {
 
     suspend fun getAccount() = repository.getAccount()
 
+    suspend fun getAccount(username: String) = repository.getAccount(username)
+
+    fun getCachedAccount() = repository.getCachedAccount()
+
     suspend fun updateAccount(fields: Map<String, Any?>) = repository.updateAccount(fields)
 
     suspend fun setProfileImage(file: File, mimeType: String) = repository.setProfileImage(file, mimeType)
diff --git a/profile/src/main/java/org/openedx/profile/domain/model/Account.kt b/profile/src/main/java/org/openedx/profile/domain/model/Account.kt
index a195f6dbe..f338fc452 100644
--- a/profile/src/main/java/org/openedx/profile/domain/model/Account.kt
+++ b/profile/src/main/java/org/openedx/profile/domain/model/Account.kt
@@ -1,53 +1,35 @@
 package org.openedx.profile.domain.model
 
 import android.os.Parcelable
-import com.google.gson.annotations.SerializedName
-import org.openedx.core.AppDataConstants.USER_MIN_YEAR
 import kotlinx.parcelize.Parcelize
+import org.openedx.core.AppDataConstants.USER_MIN_YEAR
 import org.openedx.core.domain.model.LanguageProficiency
 import org.openedx.core.domain.model.ProfileImage
-import java.util.*
+import java.util.Calendar
+import java.util.Date
 
 @Parcelize
 data class Account(
-    @SerializedName("username")
     val username: String,
-    @SerializedName("bio")
     val bio: String,
-    @SerializedName("requires_parental_consent")
     val requiresParentalConsent: Boolean,
-    @SerializedName("name")
     val name: String,
-    @SerializedName("country")
     val country: String,
-    @SerializedName("is_active")
     val isActive: Boolean,
-    @SerializedName("profile_image")
     val profileImage: ProfileImage,
-    @SerializedName("year_of_birth")
     val yearOfBirth: Int?,
-    @SerializedName("level_of_education")
     val levelOfEducation: String,
-    @SerializedName("goals")
     val goals: String,
-    @SerializedName("language_proficiencies")
     val languageProficiencies: List<LanguageProficiency>,
-    @SerializedName("gender")
     val gender: String,
-    @SerializedName("mailing_address")
     val mailingAddress: String,
-    @SerializedName("email")
     val email: String?,
-    @SerializedName("date_joined")
     val dateJoined: Date?,
-    @SerializedName("account_privacy")
     val accountPrivacy: Privacy
 ) : Parcelable {
 
     enum class Privacy {
-        @SerializedName("private")
         PRIVATE,
-        @SerializedName("all_users")
         ALL_USERS
     }
 
diff --git a/profile/src/main/java/org/openedx/profile/domain/model/Configuration.kt b/profile/src/main/java/org/openedx/profile/domain/model/Configuration.kt
new file mode 100644
index 000000000..f35d18ac4
--- /dev/null
+++ b/profile/src/main/java/org/openedx/profile/domain/model/Configuration.kt
@@ -0,0 +1,16 @@
+package org.openedx.profile.domain.model
+
+import org.openedx.core.domain.model.AgreementUrls
+
+/**
+ * @param agreementUrls User agreement urls
+ * @param faqUrl FAQ url
+ * @param supportEmail Email address of support
+ * @param versionName Version of the application (1.0.0)
+ */
+data class Configuration(
+    val agreementUrls: AgreementUrls,
+    val faqUrl: String,
+    val supportEmail: String,
+    val versionName: String,
+)
diff --git a/profile/src/main/java/org/openedx/profile/presentation/ProfileAnalytics.kt b/profile/src/main/java/org/openedx/profile/presentation/ProfileAnalytics.kt
index 27990b563..66d43b607 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/ProfileAnalytics.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/ProfileAnalytics.kt
@@ -6,7 +6,10 @@ interface ProfileAnalytics {
     fun profileDeleteAccountClickedEvent()
     fun profileVideoSettingsClickedEvent()
     fun privacyPolicyClickedEvent()
+    fun termsOfUseClickedEvent()
     fun cookiePolicyClickedEvent()
+    fun dataSellClickedEvent()
+    fun faqClickedEvent()
     fun emailSupportClickedEvent()
     fun logoutEvent(force: Boolean)
-}
\ No newline at end of file
+}
diff --git a/profile/src/main/java/org/openedx/profile/presentation/ProfileRouter.kt b/profile/src/main/java/org/openedx/profile/presentation/ProfileRouter.kt
index 457b02035..2bf343284 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/ProfileRouter.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/ProfileRouter.kt
@@ -13,6 +13,7 @@ interface ProfileRouter {
 
     fun navigateToDeleteAccount(fm: FragmentManager)
 
-    fun restartApp(fm: FragmentManager)
+    fun navigateToWebContent(fm: FragmentManager, title: String, url: String)
 
-}
\ No newline at end of file
+    fun restartApp(fm: FragmentManager, isLogistrationEnabled: Boolean)
+}
diff --git a/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileFragment.kt
new file mode 100644
index 000000000..c311f88da
--- /dev/null
+++ b/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileFragment.kt
@@ -0,0 +1,257 @@
+package org.openedx.profile.presentation.anothers_account
+
+import android.content.res.Configuration.UI_MODE_NIGHT_NO
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.domain.model.ProfileImage
+import org.openedx.core.ui.BackBtn
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.profile.domain.model.Account
+import org.openedx.profile.presentation.ui.ProfileInfoSection
+import org.openedx.profile.presentation.ui.ProfileTopic
+
+class AnothersProfileFragment : Fragment() {
+
+    private val viewModel: AnothersProfileViewModel by viewModel {
+        parametersOf(requireArguments().getString(ARG_USERNAME, ""))
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        lifecycle.addObserver(viewModel)
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val windowSize = rememberWindowSize()
+
+                val uiState by viewModel.uiState
+                val uiMessage by viewModel.uiMessage
+
+                AnothersProfileScreen(
+                    windowSize = windowSize,
+                    uiState = uiState,
+                    uiMessage = uiMessage,
+                    onBackClick = {
+                        requireActivity().supportFragmentManager.popBackStack()
+                    },
+                )
+            }
+        }
+    }
+
+    companion object {
+        private const val ARG_USERNAME = "username"
+        fun newInstance(
+            username: String,
+        ): AnothersProfileFragment {
+            val fragment = AnothersProfileFragment()
+            fragment.arguments = bundleOf(
+                ARG_USERNAME to username
+            )
+            return fragment
+        }
+    }
+}
+
+@Composable
+private fun AnothersProfileScreen(
+    windowSize: WindowSize,
+    uiState: AnothersProfileUIState,
+    uiMessage: UIMessage?,
+    onBackClick: () -> Unit
+) {
+    val scaffoldState = rememberScaffoldState()
+
+    val contentWidth by remember(key1 = windowSize) {
+        mutableStateOf(
+            windowSize.windowSizeValue(
+                expanded = Modifier.widthIn(Dp.Unspecified, 420.dp),
+                compact = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 24.dp)
+            )
+        )
+    }
+
+    val topBarWidth by remember(key1 = windowSize) {
+        mutableStateOf(
+            windowSize.windowSizeValue(
+                expanded = Modifier.widthIn(Dp.Unspecified, 560.dp),
+                compact = Modifier
+                    .fillMaxWidth()
+            )
+        )
+    }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        scaffoldState = scaffoldState,
+        topBar = {
+            Column(
+                Modifier
+                    .fillMaxWidth()
+                    .statusBarsInset(),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Box(
+                    modifier = Modifier
+                        .then(topBarWidth),
+                    contentAlignment = Alignment.CenterStart
+                ) {
+                    Text(
+                        modifier = Modifier.fillMaxWidth(),
+                        text = stringResource(id = R.string.core_profile),
+                        textAlign = TextAlign.Center,
+                        style = MaterialTheme.appTypography.titleMedium
+                    )
+                    BackBtn {
+                        onBackClick()
+                    }
+                }
+            }
+        }
+    ) { paddingValues ->
+        HandleUIMessage(uiMessage = uiMessage, scaffoldState = scaffoldState)
+
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(paddingValues)
+                .background(MaterialTheme.appColors.background),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            when (uiState) {
+                is AnothersProfileUIState.Loading -> {
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                    }
+                }
+
+                is AnothersProfileUIState.Data -> {
+                    Column(
+                        Modifier
+                            .fillMaxHeight()
+                            .then(contentWidth)
+                            .verticalScroll(rememberScrollState()),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        ProfileTopic(uiState.account)
+
+                        Spacer(modifier = Modifier.height(36.dp))
+
+                        ProfileInfoSection(uiState.account)
+
+                        Spacer(modifier = Modifier.height(36.dp))
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = UI_MODE_NIGHT_YES)
+@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun ProfileScreenPreview() {
+    OpenEdXTheme {
+        AnothersProfileScreen(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            uiState = AnothersProfileUIState.Data(mockAccount),
+            uiMessage = null,
+            onBackClick = {}
+        )
+    }
+}
+
+
+@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_9_Dark", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun ProfileScreenTabletPreview() {
+    OpenEdXTheme {
+        AnothersProfileScreen(
+            windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
+            uiState = AnothersProfileUIState.Data(mockAccount),
+            uiMessage = null,
+            onBackClick = {}
+        )
+    }
+}
+
+private val mockAccount = Account(
+    username = "thom84",
+    bio = "He as compliment unreserved projecting. Between had observe pretend delight for believe. Do newspaper questions consulted sweetness do. Our sportsman his unwilling fulfilled departure law.",
+    requiresParentalConsent = true,
+    name = "Thomas",
+    country = "Ukraine",
+    isActive = true,
+    profileImage = ProfileImage("", "", "", "", false),
+    yearOfBirth = 2000,
+    levelOfEducation = "Bachelor",
+    goals = "130",
+    languageProficiencies = emptyList(),
+    gender = "male",
+    mailingAddress = "",
+    "",
+    null,
+    accountPrivacy = Account.Privacy.ALL_USERS
+)
diff --git a/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileUIState.kt b/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileUIState.kt
new file mode 100644
index 000000000..ebffce6dd
--- /dev/null
+++ b/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileUIState.kt
@@ -0,0 +1,8 @@
+package org.openedx.profile.presentation.anothers_account
+
+import org.openedx.profile.domain.model.Account
+
+sealed class AnothersProfileUIState {
+    data class Data(val account: Account) : AnothersProfileUIState()
+    object Loading : AnothersProfileUIState()
+}
\ No newline at end of file
diff --git a/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileViewModel.kt b/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileViewModel.kt
new file mode 100644
index 000000000..b0c82e3e0
--- /dev/null
+++ b/profile/src/main/java/org/openedx/profile/presentation/anothers_account/AnothersProfileViewModel.kt
@@ -0,0 +1,49 @@
+package org.openedx.profile.presentation.anothers_account
+
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.launch
+import org.openedx.core.BaseViewModel
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.extension.isInternetError
+import org.openedx.core.system.ResourceManager
+import org.openedx.profile.domain.interactor.ProfileInteractor
+
+class AnothersProfileViewModel(
+    private val interactor: ProfileInteractor,
+    private val resourceManager: ResourceManager,
+    val username: String
+) : BaseViewModel() {
+
+    private val _uiState = mutableStateOf<AnothersProfileUIState>(AnothersProfileUIState.Loading)
+    val uiState: State<AnothersProfileUIState>
+        get() = _uiState
+
+    private val _uiMessage = mutableStateOf<UIMessage?>(null)
+    val uiMessage: State<UIMessage?>
+        get() = _uiMessage
+
+    init {
+        getAccount(username)
+    }
+
+    private fun getAccount(username: String) {
+        _uiState.value = AnothersProfileUIState.Loading
+        viewModelScope.launch {
+            try {
+                val account = interactor.getAccount(username)
+                _uiState.value = AnothersProfileUIState.Data(account)
+            } catch (e: Exception) {
+                if (e.isInternetError()) {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_no_connection))
+                } else {
+                    _uiMessage.value =
+                        UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/profile/src/main/java/org/openedx/profile/presentation/delete/DeleteProfileFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/delete/DeleteProfileFragment.kt
index f4ea03806..701fa4bb0 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/delete/DeleteProfileFragment.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/delete/DeleteProfileFragment.kt
@@ -5,16 +5,31 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.rememberScaffoldState
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
@@ -33,17 +48,27 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.core.R
 import org.openedx.core.UIMessage
-import org.openedx.core.ui.*
+import org.openedx.core.ui.BackBtn
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.IconText
+import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.OpenEdXOutlinedTextField
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
 import org.openedx.core.ui.theme.OpenEdXTheme
 import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
 import org.openedx.profile.presentation.ProfileRouter
 import org.openedx.profile.presentation.edit.EditProfileFragment
 import org.openedx.profile.presentation.profile.ProfileViewModel
-import org.koin.android.ext.android.inject
-import org.koin.androidx.viewmodel.ext.android.viewModel
 import org.openedx.profile.R as profileR
 
 class DeleteProfileFragment : Fragment() {
@@ -91,7 +116,10 @@ class DeleteProfileFragment : Fragment() {
 
                 LaunchedEffect(logoutSuccess) {
                     if (logoutSuccess) {
-                        router.restartApp(requireActivity().supportFragmentManager)
+                        router.restartApp(
+                            requireActivity().supportFragmentManager,
+                            logoutViewModel.isLogistrationEnabled
+                        )
                     }
                 }
             }
@@ -159,7 +187,8 @@ fun DeleteProfileScreen(
             Column(
                 modifier = Modifier
                     .padding(paddingValues)
-                    .statusBarsInset(),
+                    .statusBarsInset()
+                    .displayCutoutForLandscape(),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 Box(
diff --git a/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt
index 43515f98a..e911d1b4b 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/edit/EditProfileFragment.kt
@@ -41,6 +41,7 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Card
 import androidx.compose.material.Divider
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
@@ -77,6 +78,7 @@ import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
@@ -107,12 +109,12 @@ import org.koin.core.parameter.parametersOf
 import org.openedx.core.AppDataConstants.DEFAULT_MIME_TYPE
 import org.openedx.core.R
 import org.openedx.core.UIMessage
-import org.openedx.profile.domain.model.Account
 import org.openedx.core.domain.model.LanguageProficiency
 import org.openedx.core.domain.model.ProfileImage
 import org.openedx.core.domain.model.RegistrationField
 import org.openedx.core.extension.getFileName
 import org.openedx.core.extension.parcelable
+import org.openedx.core.ui.AutoSizeText
 import org.openedx.core.ui.BackBtn
 import org.openedx.core.ui.HandleUIMessage
 import org.openedx.core.ui.IconText
@@ -121,6 +123,7 @@ import org.openedx.core.ui.OpenEdXOutlinedButton
 import org.openedx.core.ui.SheetContent
 import org.openedx.core.ui.WindowSize
 import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
 import org.openedx.core.ui.isImeVisibleState
 import org.openedx.core.ui.noRippleClickable
 import org.openedx.core.ui.rememberSaveableMap
@@ -132,6 +135,7 @@ import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
 import org.openedx.core.ui.windowSizeValue
 import org.openedx.core.utils.LocaleUtils
+import org.openedx.profile.domain.model.Account
 import org.openedx.profile.presentation.ProfileRouter
 import java.io.ByteArrayOutputStream
 import java.io.File
@@ -520,21 +524,34 @@ private fun EditProfileScreen(
             }
 
             if (leaveDialog) {
-                LeaveProfile(
-                    onDismissRequest = {
-                        onKeepEdit()
-                    },
-                    onLeaveClick = {
-                        onBackClick(false)
-                    }
-                )
+                val configuration = LocalConfiguration.current
+                if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT || windowSize.isTablet) {
+                    LeaveProfile(
+                        onDismissRequest = {
+                            onKeepEdit()
+                        },
+                        onLeaveClick = {
+                            onBackClick(false)
+                        }
+                    )
+                } else {
+                    LeaveProfileLandscape(
+                        onDismissRequest = {
+                            onKeepEdit()
+                        },
+                        onLeaveClick = {
+                            onBackClick(false)
+                        }
+                    )
+                }
             }
 
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
                     .padding(paddingValues)
-                    .statusBarsInset(),
+                    .statusBarsInset()
+                    .displayCutoutForLandscape(),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 Box(
@@ -605,7 +622,7 @@ private fun EditProfileScreen(
                                         .placeholder(R.drawable.core_ic_default_profile_picture)
                                         .build(),
                                     contentScale = ContentScale.Crop,
-                                    contentDescription = null,
+                                    contentDescription = stringResource(id = R.string.core_accessibility_user_profile_image, uiState.account.username),
                                     modifier = Modifier
                                         .border(
                                             2.dp,
@@ -1035,12 +1052,14 @@ private fun LeaveProfile(
     onDismissRequest: () -> Unit,
     onLeaveClick: () -> Unit,
 ) {
+    val scrollState = rememberScrollState()
     Dialog(
         onDismissRequest = onDismissRequest,
         properties = DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false),
         content = {
             Column(
                 Modifier
+                    .verticalScroll(scrollState)
                     .fillMaxWidth()
                     .background(
                         MaterialTheme.appColors.background,
@@ -1102,6 +1121,112 @@ private fun LeaveProfile(
         })
 }
 
+@Composable
+private fun LeaveProfileLandscape(
+    onDismissRequest: () -> Unit,
+    onLeaveClick: () -> Unit,
+) {
+    val configuration = LocalConfiguration.current
+    val screenWidth = configuration.screenWidthDp.dp
+    Dialog(
+        onDismissRequest = onDismissRequest,
+        properties = DialogProperties(dismissOnBackPress = false, dismissOnClickOutside = false, usePlatformDefaultWidth = false),
+        content = {
+            Card(
+                modifier = Modifier
+                    .width(screenWidth * 0.7f)
+                    .clip(MaterialTheme.appShapes.courseImageShape),
+                backgroundColor = MaterialTheme.appColors.background,
+                shape = MaterialTheme.appShapes.courseImageShape
+            ) {
+                Row(
+                    Modifier
+                        .padding(horizontal = 40.dp)
+                        .padding(top = 48.dp, bottom = 38.dp),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Column(
+                        Modifier.weight(1f),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        Icon(
+                            modifier = Modifier.size(100.dp),
+                            painter = painterResource(id = org.openedx.profile.R.drawable.profile_ic_save),
+                            contentDescription = null,
+                            tint = MaterialTheme.appColors.onBackground
+                        )
+                        Spacer(Modifier.height(20.dp))
+                        Text(
+                            modifier = Modifier.fillMaxWidth(),
+                            text = stringResource(id = org.openedx.profile.R.string.profile_leave_profile),
+                            color = MaterialTheme.appColors.textPrimary,
+                            style = MaterialTheme.appTypography.titleLarge,
+                            textAlign = TextAlign.Center
+                        )
+                        Spacer(Modifier.height(8.dp))
+                        Text(
+                            modifier = Modifier.fillMaxWidth(),
+                            text = stringResource(id = org.openedx.profile.R.string.profile_changes_you_made),
+                            color = MaterialTheme.appColors.textFieldText,
+                            style = MaterialTheme.appTypography.titleSmall,
+                            textAlign = TextAlign.Center
+                        )
+                    }
+                    Spacer(Modifier.width(42.dp))
+                    Column(
+                        Modifier.weight(1f),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        OpenEdXButton(
+                            text = stringResource(id = org.openedx.profile.R.string.profile_leave),
+                            backgroundColor = MaterialTheme.appColors.warning,
+                            content = {
+                                AutoSizeText(
+                                    text = stringResource(id = org.openedx.profile.R.string.profile_leave),
+                                    style = MaterialTheme.appTypography.bodyMedium,
+                                    color = MaterialTheme.appColors.textDark
+                                )
+                            },
+                            onClick = onLeaveClick
+                        )
+                        Spacer(Modifier.height(16.dp))
+                        OpenEdXOutlinedButton(
+                            borderColor = MaterialTheme.appColors.textPrimary,
+                            textColor = MaterialTheme.appColors.textPrimary,
+                            text = stringResource(id = org.openedx.profile.R.string.profile_keep_editing),
+                            onClick = onDismissRequest,
+                            content = {
+                                AutoSizeText(
+                                    text = stringResource(id = org.openedx.profile.R.string.profile_keep_editing),
+                                    style = MaterialTheme.appTypography.bodyMedium,
+                                    color = MaterialTheme.appColors.textPrimary
+                                )
+                            }
+                        )
+                    }
+                }
+            }
+        })
+}
+
+@Preview
+@Composable
+fun LeaveProfilePreview() {
+    LeaveProfile(
+        onDismissRequest = {},
+        onLeaveClick = {}
+    )
+}
+
+@Preview
+@Composable
+fun LeaveProfileLandscapePreview() {
+    LeaveProfileLandscape(
+        onDismissRequest = {},
+        onLeaveClick = {}
+    )
+}
 
 @Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 @Preview(uiMode = UI_MODE_NIGHT_YES)
diff --git a/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileFragment.kt
index 96ee13059..4c18cd103 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileFragment.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileFragment.kt
@@ -1,64 +1,24 @@
 package org.openedx.profile.presentation.profile
 
-import android.content.res.Configuration.UI_MODE_NIGHT_NO
-import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.ViewGroup
-import androidx.compose.foundation.*
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.*
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowForwardIos
-import androidx.compose.material.icons.filled.ExitToApp
-import androidx.compose.material.pullrefresh.PullRefreshIndicator
-import androidx.compose.material.pullrefresh.pullRefresh
-import androidx.compose.material.pullrefresh.rememberPullRefreshState
-import androidx.compose.runtime.*
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.compose.runtime.saveable.rememberSaveable
-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.platform.ComposeView
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.platform.ViewCompositionStrategy
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.SpanStyle
-import androidx.compose.ui.text.buildAnnotatedString
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Devices
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.Dialog
 import androidx.fragment.app.Fragment
-import coil.compose.AsyncImage
-import coil.request.ImageRequest
-import org.koin.android.ext.android.inject
 import org.koin.androidx.viewmodel.ext.android.viewModel
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.profile.domain.model.Account
-import org.openedx.core.domain.model.ProfileImage
-import org.openedx.core.presentation.global.AppData
-import org.openedx.core.presentation.global.AppDataHolder
-import org.openedx.core.ui.*
+import org.openedx.core.ui.rememberWindowSize
 import org.openedx.core.ui.theme.OpenEdXTheme
-import org.openedx.core.ui.theme.appColors
-import org.openedx.core.ui.theme.appShapes
-import org.openedx.core.ui.theme.appTypography
-import org.openedx.core.utils.EmailUtil
-import org.openedx.profile.presentation.ProfileRouter
+import org.openedx.profile.presentation.profile.compose.ProfileView
+import org.openedx.profile.presentation.profile.compose.ProfileViewAction
 
 class ProfileFragment : Fragment() {
 
     private val viewModel: ProfileViewModel by viewModel()
-    private val router by inject<ProfileRouter>()
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -74,603 +34,83 @@ class ProfileFragment : Fragment() {
         setContent {
             OpenEdXTheme {
                 val windowSize = rememberWindowSize()
-
-                val uiState by viewModel.uiState.observeAsState()
+                val uiState by viewModel.uiState.collectAsState()
                 val logoutSuccess by viewModel.successLogout.observeAsState(false)
                 val uiMessage by viewModel.uiMessage.observeAsState()
                 val refreshing by viewModel.isUpdating.observeAsState(false)
+                val appUpgradeEvent by viewModel.appUpgradeEvent.observeAsState(null)
 
-                ProfileScreen(
+                ProfileView(
                     windowSize = windowSize,
-                    uiState = uiState!!,
+                    uiState = uiState,
                     uiMessage = uiMessage,
-                    appData = (requireActivity() as AppDataHolder).appData,
                     refreshing = refreshing,
-                    logout = {
-                        viewModel.logout()
-                    },
-                    editAccountClicked = {
-                        viewModel.profileEditClickedEvent()
-                        router.navigateToEditProfile(
-                            requireParentFragment().parentFragmentManager,
-                            it
-                        )
-                    },
-                    onSwipeRefresh = {
-                        viewModel.updateAccount()
-                    },
-                    onVideoSettingsClick = {
-                        viewModel.profileVideoSettingsClickedEvent()
-                        router.navigateToVideoSettings(
-                            requireParentFragment().parentFragmentManager
-                        )
-                    },
-                    onSupportClick = { action ->
+                    appUpgradeEvent = appUpgradeEvent,
+                    onAction = { action ->
                         when (action) {
-                            SupportClickAction.SUPPORT -> viewModel.emailSupportClickedEvent()
-                            SupportClickAction.COOKIE_POLICY -> viewModel.cookiePolicyClickedEvent()
-                            SupportClickAction.PRIVACY_POLICY -> viewModel.privacyPolicyClickedEvent()
-                        }
-                    }
-                )
-
-                LaunchedEffect(logoutSuccess) {
-                    if (logoutSuccess) {
-                        router.restartApp(requireParentFragment().parentFragmentManager)
-                    }
-                }
-            }
-        }
-    }
-}
-
-private enum class SupportClickAction {
-    SUPPORT, PRIVACY_POLICY, COOKIE_POLICY
-}
-
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-private fun ProfileScreen(
-    windowSize: WindowSize,
-    uiState: ProfileUIState,
-    appData: AppData,
-    uiMessage: UIMessage?,
-    refreshing: Boolean,
-    onVideoSettingsClick: () -> Unit,
-    logout: () -> Unit,
-    onSwipeRefresh: () -> Unit,
-    onSupportClick: (SupportClickAction) -> Unit,
-    editAccountClicked: (Account) -> Unit
-) {
-    val scaffoldState = rememberScaffoldState()
-    var showLogoutDialog by rememberSaveable { mutableStateOf(false) }
-
-    val pullRefreshState =
-        rememberPullRefreshState(refreshing = refreshing, onRefresh = { onSwipeRefresh() })
-
-    Scaffold(
-        modifier = Modifier.fillMaxSize(),
-        scaffoldState = scaffoldState
-    ) { paddingValues ->
-
-        val contentWidth by remember(key1 = windowSize) {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier.widthIn(Dp.Unspecified, 420.dp),
-                    compact = Modifier
-                        .fillMaxWidth()
-                        .padding(horizontal = 24.dp)
-                )
-            )
-        }
-
-        val topBarWidth by remember(key1 = windowSize) {
-            mutableStateOf(
-                windowSize.windowSizeValue(
-                    expanded = Modifier.widthIn(Dp.Unspecified, 560.dp),
-                    compact = Modifier
-                        .fillMaxWidth()
-                )
-            )
-        }
-
-
-        HandleUIMessage(uiMessage = uiMessage, scaffoldState = scaffoldState)
-
-        if (showLogoutDialog) {
-            LogoutDialog(
-                onDismissRequest = {
-                    showLogoutDialog = false
-                },
-                onLogoutClick = {
-                    showLogoutDialog = false
-                    logout()
-                }
-            )
-        }
-
-        Column(
-            modifier = Modifier
-                .padding(paddingValues)
-                .statusBarsInset(),
-            horizontalAlignment = Alignment.CenterHorizontally
-        ) {
-            Box(
-                modifier = topBarWidth,
-                contentAlignment = Alignment.CenterEnd
-            ) {
-                Text(
-                    modifier = Modifier
-                        .fillMaxWidth(),
-                    text = stringResource(id = R.string.core_profile),
-                    color = MaterialTheme.appColors.textPrimary,
-                    textAlign = TextAlign.Center,
-                    style = MaterialTheme.appTypography.titleMedium
-                )
-
-                IconText(
-                    modifier = Modifier
-                        .height(48.dp)
-                        .padding(end = 24.dp),
-                    text = stringResource(org.openedx.profile.R.string.profile_edit),
-                    painter = painterResource(id = R.drawable.core_ic_edit),
-                    textStyle = MaterialTheme.appTypography.labelLarge,
-                    color = MaterialTheme.appColors.primary,
-                    onClick = {
-                        if (uiState is ProfileUIState.Data) {
-                            editAccountClicked(uiState.account)
-                        }
-                    }
-                )
-            }
-            Surface(
-                color = MaterialTheme.appColors.background
-            ) {
-                Box(
-                    modifier = Modifier.pullRefresh(pullRefreshState),
-                    contentAlignment = Alignment.TopCenter
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .fillMaxWidth(),
-                        horizontalAlignment = Alignment.CenterHorizontally
-                    ) {
-                        when (uiState) {
-                            is ProfileUIState.Loading -> {
-                                Box(
-                                    modifier = Modifier.fillMaxSize(),
-                                    contentAlignment = Alignment.Center
-                                ) {
-                                    CircularProgressIndicator(color = MaterialTheme.appColors.primary)
-                                }
+                            ProfileViewAction.AppVersionClick -> {
+                                viewModel.appVersionClickedEvent(requireContext())
                             }
 
-                            is ProfileUIState.Data -> {
-                                Column(
-                                    Modifier
-                                        .fillMaxHeight()
-                                        .then(contentWidth)
-                                        .verticalScroll(rememberScrollState()),
-                                    horizontalAlignment = Alignment.CenterHorizontally
-                                ) {
-                                    val profileImage = if (uiState.account.profileImage.hasImage) {
-                                        uiState.account.profileImage.imageUrlFull
-                                    } else {
-                                        R.drawable.core_ic_default_profile_picture
-                                    }
-                                    AsyncImage(
-                                        model = ImageRequest.Builder(LocalContext.current)
-                                            .data(profileImage)
-                                            .error(R.drawable.core_ic_default_profile_picture)
-                                            .placeholder(R.drawable.core_ic_default_profile_picture)
-                                            .build(),
-                                        contentDescription = null,
-                                        modifier = Modifier
-                                            .border(
-                                                2.dp,
-                                                MaterialTheme.appColors.onSurface,
-                                                CircleShape
-                                            )
-                                            .padding(2.dp)
-                                            .size(100.dp)
-                                            .clip(CircleShape)
-                                    )
-                                    Spacer(modifier = Modifier.height(20.dp))
-                                    Text(
-                                        text = uiState.account.name,
-                                        color = MaterialTheme.appColors.textPrimary,
-                                        style = MaterialTheme.appTypography.headlineSmall
-                                    )
-                                    Spacer(modifier = Modifier.height(4.dp))
-                                    Text(
-                                        text = "@${uiState.account.username}",
-                                        color = MaterialTheme.appColors.textPrimaryVariant,
-                                        style = MaterialTheme.appTypography.labelLarge
-                                    )
-                                    Spacer(modifier = Modifier.height(36.dp))
-
-                                    Column(
-                                        Modifier
-                                            .fillMaxWidth()
-                                    ) {
-                                        ProfileInfoSection(uiState.account)
-
-                                        Spacer(modifier = Modifier.height(24.dp))
-
-                                        SettingsSection(onVideoSettingsClick = {
-                                            onVideoSettingsClick()
-                                        })
+                            ProfileViewAction.EditAccountClick -> {
+                                viewModel.profileEditClicked(
+                                    requireParentFragment().parentFragmentManager
+                                )
+                            }
 
-                                        Spacer(modifier = Modifier.height(24.dp))
+                            ProfileViewAction.LogoutClick -> {
+                                viewModel.logout()
+                            }
 
-                                        SupportInfoSection(appData, onClick = onSupportClick)
+                            ProfileViewAction.PrivacyPolicyClick -> {
+                                viewModel.privacyPolicyClicked(
+                                    requireParentFragment().parentFragmentManager
+                                )
+                            }
 
-                                        Spacer(modifier = Modifier.height(24.dp))
+                            ProfileViewAction.CookiePolicyClick -> {
+                                viewModel.cookiePolicyClicked(
+                                    requireParentFragment().parentFragmentManager
+                                )
+                            }
 
-                                        LogoutButton(
-                                            onClick = { showLogoutDialog = true }
-                                        )
+                            ProfileViewAction.DataSellClick -> {
+                                viewModel.dataSellClicked(
+                                    requireParentFragment().parentFragmentManager
+                                )
+                            }
 
-                                        Spacer(Modifier.height(30.dp))
-                                    }
+                            ProfileViewAction.FaqClick -> viewModel.faqClicked()
 
-                                }
+                            ProfileViewAction.SupportClick -> {
+                                viewModel.emailSupportClicked(requireContext())
                             }
-                        }
-                    }
-                    PullRefreshIndicator(
-                        refreshing,
-                        pullRefreshState,
-                        Modifier.align(Alignment.TopCenter)
-                    )
-                }
-            }
-        }
-    }
-}
 
-@Composable
-private fun ProfileInfoSection(account: Account) {
-
-    if (account.yearOfBirth != null || account.bio.isNotEmpty()) {
-        Column {
-            Text(
-                text = stringResource(id = org.openedx.profile.R.string.profile_prof_info),
-                style = MaterialTheme.appTypography.labelLarge,
-                color = MaterialTheme.appColors.textSecondary
-            )
-            Spacer(modifier = Modifier.height(14.dp))
-            Card(
-                modifier = Modifier,
-                shape = MaterialTheme.appShapes.cardShape,
-                elevation = 0.dp,
-                backgroundColor = MaterialTheme.appColors.cardViewBackground
-            ) {
-                Column(
-                    Modifier
-                        .fillMaxWidth()
-                        .padding(20.dp),
-                    verticalArrangement = Arrangement.spacedBy(16.dp)
-                ) {
-                    if (account.yearOfBirth != null) {
-                        Text(
-                            text = buildAnnotatedString {
-                                val value = if (account.yearOfBirth != null) {
-                                    account.yearOfBirth.toString()
-                                } else ""
-                                val text = stringResource(
-                                    id = org.openedx.profile.R.string.profile_year_of_birth,
-                                    value
-                                )
-                                append(text)
-                                addStyle(
-                                    style = SpanStyle(
-                                        color = MaterialTheme.appColors.textPrimaryVariant
-                                    ),
-                                    start = 0,
-                                    end = text.length - value.length
-                                )
-                            },
-                            style = MaterialTheme.appTypography.titleMedium,
-                            color = MaterialTheme.appColors.textPrimary
-                        )
-                    }
-                    if (account.bio.isNotEmpty()) {
-                        Text(
-                            text = buildAnnotatedString {
-                                val text = stringResource(
-                                    id = org.openedx.profile.R.string.profile_bio,
-                                    account.bio
-                                )
-                                append(text)
-                                addStyle(
-                                    style = SpanStyle(
-                                        color = MaterialTheme.appColors.textPrimaryVariant
-                                    ),
-                                    start = 0,
-                                    end = text.length - account.bio.length
+                            ProfileViewAction.TermsClick -> {
+                                viewModel.termsOfUseClicked(
+                                    requireParentFragment().parentFragmentManager
                                 )
-                            },
-                            style = MaterialTheme.appTypography.titleMedium,
-                            color = MaterialTheme.appColors.textPrimary
-                        )
-                    }
-                }
-            }
-        }
-    }
-}
+                            }
 
-@Composable
-fun SettingsSection(onVideoSettingsClick: () -> Unit) {
-    Column {
-        Text(
-            text = stringResource(id = org.openedx.profile.R.string.profile_settings),
-            style = MaterialTheme.appTypography.labelLarge,
-            color = MaterialTheme.appColors.textSecondary
-        )
-        Spacer(modifier = Modifier.height(14.dp))
-        Card(
-            modifier = Modifier,
-            shape = MaterialTheme.appShapes.cardShape,
-            elevation = 0.dp,
-            backgroundColor = MaterialTheme.appColors.cardViewBackground
-        ) {
-            Column(
-                Modifier
-                    .fillMaxWidth()
-                    .padding(20.dp),
-                verticalArrangement = Arrangement.spacedBy(24.dp)
-            ) {
-                ProfileInfoItem(
-                    text = stringResource(id = org.openedx.profile.R.string.profile_video_settings),
-                    onClick = onVideoSettingsClick
-                )
-            }
-        }
-    }
-}
+                            ProfileViewAction.VideoSettingsClick -> {
+                                viewModel.profileVideoSettingsClicked(
+                                    requireParentFragment().parentFragmentManager
+                                )
+                            }
 
-@Composable
-private fun SupportInfoSection(
-    appData: AppData,
-    onClick: (SupportClickAction) -> Unit
-) {
-    val uriHandler = LocalUriHandler.current
-    val context = LocalContext.current
-    Column {
-        Text(
-            text = stringResource(id = org.openedx.profile.R.string.profile_support_info),
-            style = MaterialTheme.appTypography.labelLarge,
-            color = MaterialTheme.appColors.textSecondary
-        )
-        Spacer(modifier = Modifier.height(14.dp))
-        Card(
-            modifier = Modifier,
-            shape = MaterialTheme.appShapes.cardShape,
-            elevation = 0.dp,
-            backgroundColor = MaterialTheme.appColors.cardViewBackground
-        ) {
-            Column(
-                Modifier
-                    .fillMaxWidth()
-                    .padding(20.dp),
-                verticalArrangement = Arrangement.spacedBy(24.dp)
-            ) {
-                ProfileInfoItem(
-                    text = stringResource(id = org.openedx.profile.R.string.profile_contact_support),
-                    onClick = {
-                        onClick(SupportClickAction.SUPPORT)
-                        EmailUtil.showFeedbackScreen(
-                            context,
-                            context.getString(R.string.core_email_subject),
-                            appData.versionName
-                        )
-                    }
-                )
-                Divider(color = MaterialTheme.appColors.divider)
-                ProfileInfoItem(
-                    text = stringResource(id = R.string.core_terms_of_use),
-                    onClick = {
-                        onClick(SupportClickAction.COOKIE_POLICY)
-                        uriHandler.openUri(context.getString(R.string.terms_of_service_link))
-                    }
-                )
-                Divider(color = MaterialTheme.appColors.divider)
-                ProfileInfoItem(
-                    text = stringResource(id = R.string.core_privacy_policy),
-                    onClick = {
-                        onClick(SupportClickAction.PRIVACY_POLICY)
-                        uriHandler.openUri(context.getString(R.string.privacy_policy_link))
-                    }
+                            ProfileViewAction.SwipeRefresh -> {
+                                viewModel.updateAccount()
+                            }
+                        }
+                    },
                 )
-            }
-        }
-    }
-}
 
-@Composable
-private fun LogoutButton(onClick: () -> Unit) {
-    Card(
-        modifier = Modifier
-            .fillMaxWidth()
-            .clickable {
-                onClick()
-            },
-        shape = MaterialTheme.appShapes.cardShape,
-        elevation = 0.dp,
-        backgroundColor = MaterialTheme.appColors.cardViewBackground
-    ) {
-        Row(
-            modifier = Modifier.padding(20.dp),
-            horizontalArrangement = Arrangement.SpaceBetween
-        ) {
-            Text(
-                text = stringResource(id = org.openedx.profile.R.string.profile_logout),
-                style = MaterialTheme.appTypography.titleMedium,
-                color = MaterialTheme.appColors.error
-            )
-            Icon(
-                imageVector = Icons.Filled.ExitToApp,
-                contentDescription = null,
-                tint = MaterialTheme.appColors.error
-            )
-        }
-    }
-}
-
-@Composable
-private fun LogoutDialog(
-    onDismissRequest: () -> Unit,
-    onLogoutClick: () -> Unit,
-) {
-    Dialog(
-        onDismissRequest = onDismissRequest,
-        content = {
-            Column(
-                Modifier
-                    .fillMaxWidth()
-                    .background(
-                        MaterialTheme.appColors.background,
-                        MaterialTheme.appShapes.cardShape
-                    )
-                    .clip(MaterialTheme.appShapes.cardShape)
-                    .border(
-                        1.dp,
-                        MaterialTheme.appColors.cardViewBorder,
-                        MaterialTheme.appShapes.cardShape
-                    )
-                    .padding(horizontal = 40.dp)
-                    .padding(top = 48.dp, bottom = 36.dp),
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                Icon(
-                    modifier = Modifier
-                        .width(88.dp)
-                        .height(85.dp),
-                    painter = painterResource(org.openedx.profile.R.drawable.profile_ic_exit),
-                    contentDescription = null,
-                    tint = MaterialTheme.appColors.onBackground
-                )
-                Spacer(Modifier.size(40.dp))
-                Text(
-                    text = stringResource(id = org.openedx.profile.R.string.profile_logout_dialog_body),
-                    color = MaterialTheme.appColors.textPrimary,
-                    style = MaterialTheme.appTypography.titleLarge,
-                    textAlign = TextAlign.Center
-                )
-                Spacer(Modifier.size(44.dp))
-                OpenEdXButton(
-                    text = stringResource(id = org.openedx.profile.R.string.profile_logout),
-                    backgroundColor = MaterialTheme.appColors.warning,
-                    onClick = onLogoutClick,
-                    content = {
-                        Box(
-                            Modifier
-                                .fillMaxWidth(),
-                            contentAlignment = Alignment.CenterEnd
-                        ) {
-                            Text(
-                                modifier = Modifier.fillMaxWidth(),
-                                text = stringResource(id = org.openedx.profile.R.string.profile_logout),
-                                color = MaterialTheme.appColors.textDark,
-                                style = MaterialTheme.appTypography.labelLarge,
-                                textAlign = TextAlign.Center
-                            )
-                            Icon(
-                                painter = painterResource(id = org.openedx.profile.R.drawable.profile_ic_logout),
-                                contentDescription = null,
-                                tint = Color.Black
-                            )
-                        }
+                LaunchedEffect(logoutSuccess) {
+                    if (logoutSuccess) {
+                        viewModel.restartApp(requireParentFragment().parentFragmentManager)
                     }
-                )
+                }
             }
         }
-    )
-}
-
-@Composable
-private fun ProfileInfoItem(text: String, onClick: () -> Unit) {
-    Row(
-        Modifier
-            .fillMaxWidth()
-            .clickable { onClick() },
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        Text(
-            text = text,
-            style = MaterialTheme.appTypography.titleMedium,
-            color = MaterialTheme.appColors.textPrimary
-        )
-        Icon(
-            modifier = Modifier.size(16.dp),
-            imageVector = Icons.Filled.ArrowForwardIos,
-            contentDescription = null
-        )
-    }
-}
-
-@Preview(uiMode = UI_MODE_NIGHT_NO)
-@Preview(uiMode = UI_MODE_NIGHT_YES)
-@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_NO)
-@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = UI_MODE_NIGHT_YES)
-@Composable
-private fun ProfileScreenPreview() {
-    OpenEdXTheme {
-        ProfileScreen(
-            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
-            uiState = ProfileUIState.Data(mockAccount),
-            uiMessage = null,
-            refreshing = false,
-            logout = {},
-            onSwipeRefresh = {},
-            editAccountClicked = {},
-            onVideoSettingsClick = {},
-            onSupportClick = {},
-            appData = AppData("1")
-        )
     }
 }
-
-
-@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_NO)
-@Preview(name = "NEXUS_9_Dark", device = Devices.NEXUS_9, uiMode = UI_MODE_NIGHT_YES)
-@Composable
-private fun ProfileScreenTabletPreview() {
-    OpenEdXTheme {
-        ProfileScreen(
-            windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
-            uiState = ProfileUIState.Data(mockAccount),
-            uiMessage = null,
-            refreshing = false,
-            logout = {},
-            onSwipeRefresh = {},
-            editAccountClicked = {},
-            onVideoSettingsClick = {},
-            onSupportClick = {},
-            appData = AppData("1")
-        )
-    }
-}
-
-private val mockAccount = Account(
-    username = "thom84",
-    bio = "He as compliment unreserved projecting. Between had observe pretend delight for believe. Do newspaper questions consulted sweetness do. Our sportsman his unwilling fulfilled departure law.",
-    requiresParentalConsent = true,
-    name = "Thomas",
-    country = "Ukraine",
-    isActive = true,
-    profileImage = ProfileImage("", "", "", "", false),
-    yearOfBirth = 2000,
-    levelOfEducation = "Bachelor",
-    goals = "130",
-    languageProficiencies = emptyList(),
-    gender = "male",
-    mailingAddress = "",
-    "",
-    null,
-    accountPrivacy = Account.Privacy.ALL_USERS
-)
diff --git a/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileUIState.kt b/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileUIState.kt
index c33975a5f..f869b7f0b 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileUIState.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileUIState.kt
@@ -1,8 +1,17 @@
 package org.openedx.profile.presentation.profile
 
 import org.openedx.profile.domain.model.Account
+import org.openedx.profile.domain.model.Configuration
 
 sealed class ProfileUIState {
-    data class Data(val account: Account) : ProfileUIState()
+    /**
+     * @param account User account data
+     * @param configuration Configuration data
+     */
+    data class Data(
+        val account: Account,
+        val configuration: Configuration,
+    ) : ProfileUIState()
+
     object Loading : ProfileUIState()
-}
\ No newline at end of file
+}
diff --git a/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileViewModel.kt b/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileViewModel.kt
index 081b041f8..0b0eafd8a 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileViewModel.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/profile/ProfileViewModel.kt
@@ -1,40 +1,56 @@
 package org.openedx.profile.presentation.profile
 
+import android.content.Context
+import androidx.compose.ui.text.intl.Locale
+import androidx.fragment.app.FragmentManager
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.viewModelScope
+import kotlinx.coroutines.CoroutineDispatcher
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import org.openedx.core.AppUpdateState
 import org.openedx.core.BaseViewModel
 import org.openedx.core.R
 import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
 import org.openedx.core.extension.isInternetError
 import org.openedx.core.module.DownloadWorkerController
+import org.openedx.core.presentation.global.AppData
 import org.openedx.core.system.AppCookieManager
 import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.system.notifier.AppUpgradeNotifier
+import org.openedx.core.utils.EmailUtil
 import org.openedx.profile.domain.interactor.ProfileInteractor
+import org.openedx.profile.domain.model.Configuration
 import org.openedx.profile.presentation.ProfileAnalytics
+import org.openedx.profile.presentation.ProfileRouter
 import org.openedx.profile.system.notifier.AccountDeactivated
 import org.openedx.profile.system.notifier.AccountUpdated
 import org.openedx.profile.system.notifier.ProfileNotifier
-import kotlinx.coroutines.CoroutineDispatcher
-import kotlinx.coroutines.launch
-import kotlinx.coroutines.withContext
-import org.openedx.profile.data.storage.ProfilePreferences
 
 class ProfileViewModel(
+    private val appData: AppData,
+    private val config: Config,
     private val interactor: ProfileInteractor,
-    private val preferencesManager: ProfilePreferences,
     private val resourceManager: ResourceManager,
     private val notifier: ProfileNotifier,
     private val dispatcher: CoroutineDispatcher,
     private val cookieManager: AppCookieManager,
     private val workerController: DownloadWorkerController,
-    private val analytics: ProfileAnalytics
+    private val analytics: ProfileAnalytics,
+    private val router: ProfileRouter,
+    private val appUpgradeNotifier: AppUpgradeNotifier
 ) : BaseViewModel() {
 
-    private val _uiState = MutableLiveData<ProfileUIState>(ProfileUIState.Loading)
-    val uiState: LiveData<ProfileUIState>
-        get() = _uiState
+    private val _uiState: MutableStateFlow<ProfileUIState> =
+        MutableStateFlow(ProfileUIState.Loading)
+    internal val uiState: StateFlow<ProfileUIState> = _uiState.asStateFlow()
 
     private val _successLogout = MutableLiveData<Boolean>()
     val successLogout: LiveData<Boolean>
@@ -48,8 +64,23 @@ class ProfileViewModel(
     val isUpdating: LiveData<Boolean>
         get() = _isUpdating
 
+    private val _appUpgradeEvent = MutableLiveData<AppUpgradeEvent?>()
+    val appUpgradeEvent: LiveData<AppUpgradeEvent?>
+        get() = _appUpgradeEvent
+
+    val isLogistrationEnabled get() = config.isPreLoginExperienceEnabled()
+
+    private val configuration
+        get() = Configuration(
+            agreementUrls = config.getAgreement(Locale.current.language),
+            faqUrl = config.getFaqUrl(),
+            supportEmail = config.getFeedbackEmailAddress(),
+            versionName = appData.versionName,
+        )
+
     init {
         getAccount()
+        collectAppUpgradeEvent()
     }
 
     override fun onCreate(owner: LifecycleOwner) {
@@ -69,15 +100,20 @@ class ProfileViewModel(
         _uiState.value = ProfileUIState.Loading
         viewModelScope.launch {
             try {
-                val cachedAccount = preferencesManager.profile
+                val cachedAccount = interactor.getCachedAccount()
                 if (cachedAccount == null) {
                     _uiState.value = ProfileUIState.Loading
                 } else {
-                    _uiState.value = ProfileUIState.Data(cachedAccount)
+                    _uiState.value = ProfileUIState.Data(
+                        account = cachedAccount,
+                        configuration = configuration,
+                    )
                 }
                 val account = interactor.getAccount()
-                _uiState.value = ProfileUIState.Data(account)
-                preferencesManager.profile = account
+                _uiState.value = ProfileUIState.Data(
+                    account = account,
+                    configuration = configuration,
+                )
             } catch (e: Exception) {
                 if (e.isInternetError()) {
                     _uiMessage.value =
@@ -104,9 +140,6 @@ class ProfileViewModel(
                 withContext(dispatcher) {
                     interactor.logout()
                 }
-                cookieManager.clearWebViewCookie()
-                analytics.logoutEvent(false)
-                _successLogout.value = true
             } catch (e: Exception) {
                 if (e.isInternetError()) {
                     _uiMessage.value =
@@ -115,28 +148,95 @@ class ProfileViewModel(
                     _uiMessage.value =
                         UIMessage.SnackBarMessage(resourceManager.getString(R.string.core_error_unknown_error))
                 }
+            } finally {
+                cookieManager.clearWebViewCookie()
+                analytics.logoutEvent(false)
+                _successLogout.value = true
             }
         }
     }
 
-    fun profileEditClickedEvent() {
+    private fun collectAppUpgradeEvent() {
+        viewModelScope.launch {
+            appUpgradeNotifier.notifier.collect { event ->
+                _appUpgradeEvent.value = event
+            }
+        }
+    }
+
+    fun profileEditClicked(fragmentManager: FragmentManager) {
+        (uiState.value as? ProfileUIState.Data)?.let { data ->
+            router.navigateToEditProfile(
+                fragmentManager,
+                data.account
+            )
+        }
         analytics.profileEditClickedEvent()
     }
 
-    fun profileVideoSettingsClickedEvent() {
+    fun profileVideoSettingsClicked(fragmentManager: FragmentManager) {
+        router.navigateToVideoSettings(fragmentManager)
         analytics.profileVideoSettingsClickedEvent()
     }
 
-    fun privacyPolicyClickedEvent() {
+    fun privacyPolicyClicked(fragmentManager: FragmentManager) {
+        router.navigateToWebContent(
+            fm = fragmentManager,
+            title = resourceManager.getString(R.string.core_privacy_policy),
+            url = configuration.agreementUrls.privacyPolicyUrl,
+        )
         analytics.privacyPolicyClickedEvent()
     }
 
-    fun cookiePolicyClickedEvent() {
+    fun cookiePolicyClicked(fragmentManager: FragmentManager) {
+        router.navigateToWebContent(
+            fm = fragmentManager,
+            title = resourceManager.getString(R.string.core_cookie_policy),
+            url = configuration.agreementUrls.cookiePolicyUrl,
+        )
         analytics.cookiePolicyClickedEvent()
     }
 
-    fun emailSupportClickedEvent() {
+    fun dataSellClicked(fragmentManager: FragmentManager) {
+        router.navigateToWebContent(
+            fm = fragmentManager,
+            title = resourceManager.getString(R.string.core_data_sell),
+            url = configuration.agreementUrls.dataSellConsentUrl,
+        )
+        analytics.dataSellClickedEvent()
+    }
+
+    fun faqClicked() {
+        analytics.faqClickedEvent()
+    }
+
+    fun termsOfUseClicked(fragmentManager: FragmentManager) {
+        router.navigateToWebContent(
+            fm = fragmentManager,
+            title = resourceManager.getString(R.string.core_terms_of_use),
+            url = configuration.agreementUrls.tosUrl,
+        )
+        analytics.termsOfUseClickedEvent()
+    }
+
+    fun emailSupportClicked(context: Context) {
+        EmailUtil.showFeedbackScreen(
+            context = context,
+            feedbackEmailAddress = config.getFeedbackEmailAddress(),
+            appVersion = appData.versionName
+        )
         analytics.emailSupportClickedEvent()
     }
 
-}
\ No newline at end of file
+    fun appVersionClickedEvent(context: Context) {
+        AppUpdateState.openPlayMarket(context)
+    }
+
+    fun restartApp(fragmentManager: FragmentManager) {
+        router.restartApp(
+            fragmentManager,
+            isLogistrationEnabled
+        )
+    }
+
+}
diff --git a/profile/src/main/java/org/openedx/profile/presentation/profile/compose/ProfileView.kt b/profile/src/main/java/org/openedx/profile/presentation/profile/compose/ProfileView.kt
new file mode 100644
index 000000000..cd544a7a7
--- /dev/null
+++ b/profile/src/main/java/org/openedx/profile/presentation/profile/compose/ProfileView.kt
@@ -0,0 +1,793 @@
+package org.openedx.profile.presentation.profile.compose
+
+import android.content.res.Configuration
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Card
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Divider
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowForwardIos
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.ExitToApp
+import androidx.compose.material.icons.filled.OpenInNew
+import androidx.compose.material.pullrefresh.PullRefreshIndicator
+import androidx.compose.material.pullrefresh.pullRefresh
+import androidx.compose.material.pullrefresh.rememberPullRefreshState
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+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.platform.LocalUriHandler
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.domain.model.AgreementUrls
+import org.openedx.core.domain.model.ProfileImage
+import org.openedx.core.presentation.global.AppData
+import org.openedx.core.system.notifier.AppUpgradeEvent
+import org.openedx.core.ui.HandleUIMessage
+import org.openedx.core.ui.IconText
+import org.openedx.core.ui.OpenEdXButton
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.WindowType
+import org.openedx.core.ui.displayCutoutForLandscape
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.profile.domain.model.Account
+import org.openedx.profile.presentation.profile.ProfileUIState
+import org.openedx.profile.presentation.ui.ProfileInfoSection
+import org.openedx.profile.presentation.ui.ProfileTopic
+import org.openedx.profile.domain.model.Configuration as AppConfiguration
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+internal fun ProfileView(
+    windowSize: WindowSize,
+    uiState: ProfileUIState,
+    uiMessage: UIMessage?,
+    refreshing: Boolean,
+    appUpgradeEvent: AppUpgradeEvent?,
+    onAction: (ProfileViewAction) -> Unit,
+) {
+    val scaffoldState = rememberScaffoldState()
+    var showLogoutDialog by rememberSaveable { mutableStateOf(false) }
+
+    val pullRefreshState = rememberPullRefreshState(
+        refreshing = refreshing,
+        onRefresh = { onAction(ProfileViewAction.SwipeRefresh) })
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        scaffoldState = scaffoldState
+    ) { paddingValues ->
+
+        val contentWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier.widthIn(Dp.Unspecified, 420.dp),
+                    compact = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 24.dp)
+                )
+            )
+        }
+
+        val topBarWidth by remember(key1 = windowSize) {
+            mutableStateOf(
+                windowSize.windowSizeValue(
+                    expanded = Modifier.widthIn(Dp.Unspecified, 560.dp),
+                    compact = Modifier
+                        .fillMaxWidth()
+                )
+            )
+        }
+
+        HandleUIMessage(uiMessage = uiMessage, scaffoldState = scaffoldState)
+
+        if (showLogoutDialog) {
+            LogoutDialog(
+                onDismissRequest = {
+                    showLogoutDialog = false
+                },
+                onLogoutClick = {
+                    showLogoutDialog = false
+                    onAction(ProfileViewAction.LogoutClick)
+                }
+            )
+        }
+
+        Column(
+            modifier = Modifier
+                .padding(paddingValues)
+                .statusBarsInset()
+                .displayCutoutForLandscape(),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Box(
+                modifier = topBarWidth,
+                contentAlignment = Alignment.CenterEnd
+            ) {
+                Text(
+                    modifier = Modifier
+                        .fillMaxWidth(),
+                    text = stringResource(id = R.string.core_profile),
+                    color = MaterialTheme.appColors.textPrimary,
+                    textAlign = TextAlign.Center,
+                    style = MaterialTheme.appTypography.titleMedium
+                )
+
+                IconText(
+                    modifier = Modifier
+                        .height(48.dp)
+                        .padding(end = 24.dp),
+                    text = stringResource(org.openedx.profile.R.string.profile_edit),
+                    painter = painterResource(id = R.drawable.core_ic_edit),
+                    textStyle = MaterialTheme.appTypography.labelLarge,
+                    color = MaterialTheme.appColors.primary,
+                    onClick = {
+                        if (uiState is ProfileUIState.Data) {
+                            onAction(ProfileViewAction.EditAccountClick)
+                        }
+                    }
+                )
+            }
+            Surface(
+                color = MaterialTheme.appColors.background
+            ) {
+                Box(
+                    modifier = Modifier.pullRefresh(pullRefreshState),
+                    contentAlignment = Alignment.TopCenter
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth(),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        when (uiState) {
+                            is ProfileUIState.Loading -> {
+                                Box(
+                                    modifier = Modifier.fillMaxSize(),
+                                    contentAlignment = Alignment.Center
+                                ) {
+                                    CircularProgressIndicator(color = MaterialTheme.appColors.primary)
+                                }
+                            }
+
+                            is ProfileUIState.Data -> {
+                                Column(
+                                    Modifier
+                                        .fillMaxHeight()
+                                        .then(contentWidth)
+                                        .verticalScroll(rememberScrollState()),
+                                    horizontalAlignment = Alignment.CenterHorizontally
+                                ) {
+                                    ProfileTopic(uiState.account)
+
+                                    Spacer(modifier = Modifier.height(36.dp))
+
+                                    ProfileInfoSection(uiState.account)
+
+                                    Spacer(modifier = Modifier.height(24.dp))
+
+                                    SettingsSection(onVideoSettingsClick = {
+                                        onAction(ProfileViewAction.VideoSettingsClick)
+                                    })
+
+                                    Spacer(modifier = Modifier.height(24.dp))
+
+                                    SupportInfoSection(
+                                        uiState = uiState,
+                                        onAction = onAction,
+                                        appUpgradeEvent = appUpgradeEvent,
+                                    )
+
+                                    Spacer(modifier = Modifier.height(24.dp))
+
+                                    LogoutButton(
+                                        onClick = { showLogoutDialog = true }
+                                    )
+
+                                    Spacer(Modifier.height(30.dp))
+                                }
+                            }
+                        }
+                    }
+                    PullRefreshIndicator(
+                        refreshing,
+                        pullRefreshState,
+                        Modifier.align(Alignment.TopCenter)
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun SettingsSection(onVideoSettingsClick: () -> Unit) {
+    Column {
+        Text(
+            text = stringResource(id = org.openedx.profile.R.string.profile_settings),
+            style = MaterialTheme.appTypography.labelLarge,
+            color = MaterialTheme.appColors.textSecondary
+        )
+        Spacer(modifier = Modifier.height(14.dp))
+        Card(
+            modifier = Modifier,
+            shape = MaterialTheme.appShapes.cardShape,
+            elevation = 0.dp,
+            backgroundColor = MaterialTheme.appColors.cardViewBackground
+        ) {
+            Column(Modifier.fillMaxWidth()) {
+                ProfileInfoItem(
+                    text = stringResource(id = org.openedx.profile.R.string.profile_video_settings),
+                    onClick = onVideoSettingsClick
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun SupportInfoSection(
+    uiState: ProfileUIState.Data,
+    appUpgradeEvent: AppUpgradeEvent?,
+    onAction: (ProfileViewAction) -> Unit
+) {
+    Column {
+        Text(
+            text = stringResource(id = org.openedx.profile.R.string.profile_support_info),
+            style = MaterialTheme.appTypography.labelLarge,
+            color = MaterialTheme.appColors.textSecondary
+        )
+        Spacer(modifier = Modifier.height(14.dp))
+        Card(
+            modifier = Modifier,
+            shape = MaterialTheme.appShapes.cardShape,
+            elevation = 0.dp,
+            backgroundColor = MaterialTheme.appColors.cardViewBackground
+        ) {
+            Column(Modifier.fillMaxWidth()) {
+                if (uiState.configuration.supportEmail.isNotBlank()) {
+                    ProfileInfoItem(text = stringResource(id = org.openedx.profile.R.string.profile_contact_support)) {
+                        onAction(ProfileViewAction.SupportClick)
+                    }
+                    Divider(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        color = MaterialTheme.appColors.divider
+                    )
+                }
+                if (uiState.configuration.agreementUrls.tosUrl.isNotBlank()) {
+                    ProfileInfoItem(text = stringResource(id = R.string.core_terms_of_use)) {
+                        onAction(ProfileViewAction.TermsClick)
+                    }
+                    Divider(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        color = MaterialTheme.appColors.divider
+                    )
+                }
+                if (uiState.configuration.agreementUrls.privacyPolicyUrl.isNotBlank()) {
+                    ProfileInfoItem(text = stringResource(id = R.string.core_privacy_policy)) {
+                        onAction(ProfileViewAction.PrivacyPolicyClick)
+                    }
+                    Divider(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        color = MaterialTheme.appColors.divider
+                    )
+                }
+                if (uiState.configuration.agreementUrls.cookiePolicyUrl.isNotBlank()) {
+                    ProfileInfoItem(text = stringResource(id = R.string.core_cookie_policy)) {
+                        onAction(ProfileViewAction.CookiePolicyClick)
+                    }
+                    Divider(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        color = MaterialTheme.appColors.divider
+                    )
+                }
+                if (uiState.configuration.agreementUrls.dataSellConsentUrl.isNotBlank()) {
+                    ProfileInfoItem(text = stringResource(id = R.string.core_data_sell)) {
+                        onAction(ProfileViewAction.DataSellClick)
+                    }
+                    Divider(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        color = MaterialTheme.appColors.divider
+                    )
+                }
+                if (uiState.configuration.faqUrl.isNotBlank()) {
+                    val uriHandler = LocalUriHandler.current
+                    ProfileInfoItem(
+                        text = stringResource(id = R.string.core_faq),
+                        external = true,
+                    ) {
+                        uriHandler.openUri(uiState.configuration.faqUrl)
+                        onAction(ProfileViewAction.FaqClick)
+                    }
+                    Divider(
+                        modifier = Modifier.padding(vertical = 4.dp),
+                        color = MaterialTheme.appColors.divider
+                    )
+                }
+                AppVersionItem(
+                    versionName = uiState.configuration.versionName,
+                    appUpgradeEvent = appUpgradeEvent,
+                ) {
+                    onAction(ProfileViewAction.AppVersionClick)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun LogoutButton(onClick: () -> Unit) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable {
+                onClick()
+            },
+        shape = MaterialTheme.appShapes.cardShape,
+        elevation = 0.dp,
+        backgroundColor = MaterialTheme.appColors.cardViewBackground
+    ) {
+        Row(
+            modifier = Modifier.padding(20.dp),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Text(
+                text = stringResource(id = org.openedx.profile.R.string.profile_logout),
+                style = MaterialTheme.appTypography.titleMedium,
+                color = MaterialTheme.appColors.error
+            )
+            Icon(
+                imageVector = Icons.Filled.ExitToApp,
+                contentDescription = null,
+                tint = MaterialTheme.appColors.error
+            )
+        }
+    }
+}
+
+@Composable
+private fun LogoutDialog(
+    onDismissRequest: () -> Unit,
+    onLogoutClick: () -> Unit,
+) {
+    Dialog(
+        onDismissRequest = onDismissRequest,
+        content = {
+            Column(
+                Modifier
+                    .verticalScroll(rememberScrollState())
+                    .fillMaxWidth()
+                    .background(
+                        MaterialTheme.appColors.background,
+                        MaterialTheme.appShapes.cardShape
+                    )
+                    .clip(MaterialTheme.appShapes.cardShape)
+                    .border(
+                        1.dp,
+                        MaterialTheme.appColors.cardViewBorder,
+                        MaterialTheme.appShapes.cardShape
+                    )
+                    .padding(horizontal = 40.dp, vertical = 36.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Box(
+                    modifier = Modifier.fillMaxWidth(),
+                    contentAlignment = Alignment.CenterEnd
+                ) {
+                    IconButton(
+                        modifier = Modifier.size(24.dp),
+                        onClick = onDismissRequest
+                    ) {
+                        Icon(
+                            imageVector = Icons.Filled.Close,
+                            contentDescription = stringResource(id = R.string.core_cancel),
+                            tint = MaterialTheme.appColors.primary
+                        )
+                    }
+                }
+                Icon(
+                    modifier = Modifier
+                        .width(88.dp)
+                        .height(85.dp),
+                    painter = painterResource(org.openedx.profile.R.drawable.profile_ic_exit),
+                    contentDescription = null,
+                    tint = MaterialTheme.appColors.onBackground
+                )
+                Spacer(Modifier.size(36.dp))
+                Text(
+                    text = stringResource(id = org.openedx.profile.R.string.profile_logout_dialog_body),
+                    color = MaterialTheme.appColors.textPrimary,
+                    style = MaterialTheme.appTypography.titleLarge,
+                    textAlign = TextAlign.Center
+                )
+                Spacer(Modifier.size(36.dp))
+                OpenEdXButton(
+                    text = stringResource(id = org.openedx.profile.R.string.profile_logout),
+                    backgroundColor = MaterialTheme.appColors.warning,
+                    onClick = onLogoutClick,
+                    content = {
+                        Box(
+                            Modifier
+                                .fillMaxWidth(),
+                            contentAlignment = Alignment.CenterEnd
+                        ) {
+                            Text(
+                                modifier = Modifier.fillMaxWidth(),
+                                text = stringResource(id = org.openedx.profile.R.string.profile_logout),
+                                color = MaterialTheme.appColors.textDark,
+                                style = MaterialTheme.appTypography.labelLarge,
+                                textAlign = TextAlign.Center
+                            )
+                            Icon(
+                                painter = painterResource(id = org.openedx.profile.R.drawable.profile_ic_logout),
+                                contentDescription = null,
+                                tint = Color.Black
+                            )
+                        }
+                    }
+                )
+            }
+        }
+    )
+}
+
+@Composable
+private fun ProfileInfoItem(
+    text: String,
+    external: Boolean = false,
+    onClick: () -> Unit
+) {
+    val icon = if (external) {
+        Icons.Filled.OpenInNew
+    } else {
+        Icons.Filled.ArrowForwardIos
+    }
+    Row(
+        Modifier
+            .fillMaxWidth()
+            .clickable { onClick() }
+            .padding(20.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            modifier = Modifier.weight(1f),
+            text = text,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+            style = MaterialTheme.appTypography.titleMedium,
+            color = MaterialTheme.appColors.textPrimary
+        )
+        Icon(
+            modifier = Modifier.size(16.dp),
+            imageVector = icon,
+            contentDescription = null
+        )
+    }
+}
+
+@Composable
+private fun AppVersionItem(
+    versionName: String,
+    appUpgradeEvent: AppUpgradeEvent?,
+    onClick: () -> Unit
+) {
+    Box(modifier = Modifier.padding(20.dp)) {
+        when (appUpgradeEvent) {
+            is AppUpgradeEvent.UpgradeRecommendedEvent -> {
+                AppVersionItemUpgradeRecommended(
+                    versionName = versionName,
+                    appUpgradeEvent = appUpgradeEvent,
+                    onClick = onClick
+                )
+            }
+
+            is AppUpgradeEvent.UpgradeRequiredEvent -> {
+                AppVersionItemUpgradeRequired(
+                    versionName = versionName,
+                    onClick = onClick
+                )
+            }
+
+            else -> {
+                AppVersionItemAppToDate(
+                    versionName = versionName
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun AppVersionItemAppToDate(versionName: String) {
+    Column(
+        Modifier
+            .fillMaxWidth(),
+        verticalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        Text(
+            text = stringResource(id = R.string.core_version, versionName),
+            style = MaterialTheme.appTypography.titleMedium,
+            color = MaterialTheme.appColors.textPrimary
+        )
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp)
+        ) {
+            Icon(
+                modifier = Modifier.size(
+                    (MaterialTheme.appTypography.labelLarge.fontSize.value + 4).dp
+                ),
+                painter = painterResource(id = R.drawable.core_ic_check),
+                contentDescription = null,
+                tint = MaterialTheme.appColors.accessGreen
+            )
+            Text(
+                text = stringResource(id = R.string.core_up_to_date),
+                color = MaterialTheme.appColors.textSecondary,
+                style = MaterialTheme.appTypography.labelLarge
+            )
+        }
+    }
+}
+
+@Composable
+private fun AppVersionItemUpgradeRecommended(
+    versionName: String,
+    appUpgradeEvent: AppUpgradeEvent.UpgradeRecommendedEvent,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable {
+                onClick()
+            },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(4.dp)
+        ) {
+            Text(
+                text = stringResource(id = R.string.core_version, versionName),
+                style = MaterialTheme.appTypography.titleMedium,
+                color = MaterialTheme.appColors.textPrimary
+            )
+            Text(
+                text = stringResource(
+                    id = R.string.core_tap_to_update_to_version,
+                    appUpgradeEvent.newVersionName
+                ),
+                color = MaterialTheme.appColors.textAccent,
+                style = MaterialTheme.appTypography.labelLarge
+            )
+        }
+        Icon(
+            modifier = Modifier.size(28.dp),
+            painter = painterResource(id = R.drawable.core_ic_icon_upgrade),
+            tint = MaterialTheme.appColors.primary,
+            contentDescription = null
+        )
+    }
+}
+
+@Composable
+fun AppVersionItemUpgradeRequired(
+    versionName: String,
+    onClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .clickable {
+                onClick()
+            },
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(4.dp)
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                Image(
+                    modifier = Modifier
+                        .size((MaterialTheme.appTypography.labelLarge.fontSize.value + 8).dp),
+                    painter = painterResource(id = R.drawable.core_ic_warning),
+                    contentDescription = null
+                )
+                Text(
+                    text = stringResource(id = R.string.core_version, versionName),
+                    style = MaterialTheme.appTypography.titleMedium,
+                    color = MaterialTheme.appColors.textPrimary
+                )
+            }
+            Text(
+                text = stringResource(id = R.string.core_tap_to_install_required_app_update),
+                color = MaterialTheme.appColors.textAccent,
+                style = MaterialTheme.appTypography.labelLarge
+            )
+        }
+        Icon(
+            modifier = Modifier.size(28.dp),
+            painter = painterResource(id = R.drawable.core_ic_icon_upgrade),
+            tint = MaterialTheme.appColors.primary,
+            contentDescription = null
+        )
+    }
+}
+
+@Preview
+@Composable
+fun AppVersionItemAppToDatePreview() {
+    OpenEdXTheme {
+        AppVersionItem(
+            versionName = mockAppData.versionName,
+            appUpgradeEvent = null,
+            onClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+fun AppVersionItemUpgradeRecommendedPreview() {
+    OpenEdXTheme {
+        AppVersionItem(
+            versionName = mockAppData.versionName,
+            appUpgradeEvent = AppUpgradeEvent.UpgradeRecommendedEvent("1.0.1"),
+            onClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+fun AppVersionItemUpgradeRequiredPreview() {
+    OpenEdXTheme {
+        AppVersionItem(
+            versionName = mockAppData.versionName,
+            appUpgradeEvent = AppUpgradeEvent.UpgradeRequiredEvent,
+            onClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+fun LogoutDialogPreview() {
+    LogoutDialog({}, {})
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(name = "NEXUS_5_Light", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_5_Dark", device = Devices.NEXUS_5, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun ProfileScreenPreview() {
+    OpenEdXTheme {
+        ProfileView(
+            windowSize = WindowSize(WindowType.Compact, WindowType.Compact),
+            uiState = mockUiState,
+            uiMessage = null,
+            refreshing = false,
+            onAction = {},
+            appUpgradeEvent = null,
+        )
+    }
+}
+
+
+@Preview(name = "NEXUS_9_Light", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(name = "NEXUS_9_Dark", device = Devices.NEXUS_9, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun ProfileScreenTabletPreview() {
+    OpenEdXTheme {
+        ProfileView(
+            windowSize = WindowSize(WindowType.Medium, WindowType.Medium),
+            uiState = mockUiState,
+            uiMessage = null,
+            refreshing = false,
+            onAction = {},
+            appUpgradeEvent = null,
+        )
+    }
+}
+
+private val mockAppData = AppData(
+    versionName = "1.0.0",
+)
+
+private val mockAccount = Account(
+    username = "thom84",
+    bio = "He as compliment unreserved projecting. Between had observe pretend delight for believe. Do newspaper questions consulted sweetness do. Our sportsman his unwilling fulfilled departure law.",
+    requiresParentalConsent = true,
+    name = "Thomas",
+    country = "Ukraine",
+    isActive = true,
+    profileImage = ProfileImage("", "", "", "", false),
+    yearOfBirth = 2000,
+    levelOfEducation = "Bachelor",
+    goals = "130",
+    languageProficiencies = emptyList(),
+    gender = "male",
+    mailingAddress = "",
+    "",
+    null,
+    accountPrivacy = Account.Privacy.ALL_USERS
+)
+
+private val mockConfiguration = AppConfiguration(
+    agreementUrls = AgreementUrls(),
+    faqUrl = "https://example.com/faq",
+    supportEmail = "test@example.com",
+    versionName = mockAppData.versionName,
+)
+
+private val mockUiState = ProfileUIState.Data(
+    account = mockAccount,
+    configuration = mockConfiguration,
+)
+
+internal interface ProfileViewAction {
+    object AppVersionClick : ProfileViewAction
+    object EditAccountClick : ProfileViewAction
+    object LogoutClick : ProfileViewAction
+    object PrivacyPolicyClick : ProfileViewAction
+    object CookiePolicyClick : ProfileViewAction
+    object DataSellClick : ProfileViewAction
+    object FaqClick : ProfileViewAction
+    object TermsClick : ProfileViewAction
+    object SupportClick : ProfileViewAction
+    object VideoSettingsClick : ProfileViewAction
+    object SwipeRefresh : ProfileViewAction
+}
diff --git a/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoQualityFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoQualityFragment.kt
index ccda6e9d2..46c645a76 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoQualityFragment.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoQualityFragment.kt
@@ -7,6 +7,8 @@ import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Done
@@ -108,7 +110,8 @@ private fun VideoQualityScreen(
             Column(
                 modifier = Modifier
                     .padding(paddingValues)
-                    .statusBarsInset(),
+                    .statusBarsInset()
+                    .displayCutoutForLandscape(),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 Box(
@@ -118,7 +121,7 @@ private fun VideoQualityScreen(
                     Text(
                         modifier = Modifier
                             .fillMaxWidth(),
-                        text = stringResource(id = profileR.string.profile_video_download_quality),
+                        text = stringResource(id = profileR.string.profile_video_streaming_quality),
                         color = MaterialTheme.appColors.textPrimary,
                         textAlign = TextAlign.Center,
                         style = MaterialTheme.appTypography.titleMedium
@@ -129,7 +132,9 @@ private fun VideoQualityScreen(
                 }
 
                 Column(
-                    modifier = Modifier.then(contentWidth),
+                    modifier = Modifier
+                        .then(contentWidth)
+                        .verticalScroll(rememberScrollState()),
                     horizontalAlignment = Alignment.CenterHorizontally
                 ) {
                     val autoQuality =
diff --git a/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoSettingsFragment.kt b/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoSettingsFragment.kt
index 8816decd9..747df792a 100644
--- a/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoSettingsFragment.kt
+++ b/profile/src/main/java/org/openedx/profile/presentation/settings/video/VideoSettingsFragment.kt
@@ -123,7 +123,8 @@ private fun VideoSettingsScreen(
             Column(
                 modifier = Modifier
                     .padding(paddingValues)
-                    .statusBarsInset(),
+                    .statusBarsInset()
+                    .displayCutoutForLandscape(),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
                 Box(
@@ -197,7 +198,7 @@ private fun VideoSettingsScreen(
                     ) {
                         Column(Modifier.weight(1f)) {
                             Text(
-                                text = stringResource(id = profileR.string.profile_video_download_quality),
+                                text = stringResource(id = profileR.string.profile_video_streaming_quality),
                                 color = MaterialTheme.appColors.textPrimary,
                                 style = MaterialTheme.appTypography.titleMedium
                             )
diff --git a/profile/src/main/java/org/openedx/profile/presentation/ui/ProfileUI.kt b/profile/src/main/java/org/openedx/profile/presentation/ui/ProfileUI.kt
new file mode 100644
index 000000000..9dceab592
--- /dev/null
+++ b/profile/src/main/java/org/openedx/profile/presentation/ui/ProfileUI.kt
@@ -0,0 +1,148 @@
+package org.openedx.profile.presentation.ui
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Card
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+import org.openedx.core.R
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.profile.domain.model.Account
+
+@Composable
+fun ProfileTopic(account: Account) {
+    Column(
+        Modifier.fillMaxHeight(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        val profileImage = if (account.profileImage.hasImage) {
+            account.profileImage.imageUrlFull
+        } else {
+            R.drawable.core_ic_default_profile_picture
+        }
+        AsyncImage(
+            model = ImageRequest.Builder(LocalContext.current)
+                .data(profileImage)
+                .error(R.drawable.core_ic_default_profile_picture)
+                .placeholder(R.drawable.core_ic_default_profile_picture)
+                .build(),
+            contentDescription = stringResource(id = R.string.core_accessibility_user_profile_image, account.username),
+            modifier = Modifier
+                .border(
+                    2.dp,
+                    MaterialTheme.appColors.onSurface,
+                    CircleShape
+                )
+                .padding(2.dp)
+                .size(100.dp)
+                .clip(CircleShape)
+        )
+        if (account.name.isNotEmpty()) {
+            Spacer(modifier = Modifier.height(20.dp))
+            Text(
+                text = account.name,
+                color = MaterialTheme.appColors.textPrimary,
+                style = MaterialTheme.appTypography.headlineSmall
+            )
+        }
+        Spacer(modifier = Modifier.height(4.dp))
+        Text(
+            text = "@${account.username}",
+            color = MaterialTheme.appColors.textPrimaryVariant,
+            style = MaterialTheme.appTypography.labelLarge
+        )
+    }
+}
+
+@Composable
+fun ProfileInfoSection(account: Account) {
+
+    if (account.yearOfBirth != null || account.bio.isNotEmpty()) {
+        Column {
+            Text(
+                text = stringResource(id = org.openedx.profile.R.string.profile_prof_info),
+                style = MaterialTheme.appTypography.labelLarge,
+                color = MaterialTheme.appColors.textSecondary
+            )
+            Spacer(modifier = Modifier.height(14.dp))
+            Card(
+                modifier = Modifier,
+                shape = MaterialTheme.appShapes.cardShape,
+                elevation = 0.dp,
+                backgroundColor = MaterialTheme.appColors.cardViewBackground
+            ) {
+                Column(
+                    Modifier
+                        .fillMaxWidth()
+                        .padding(20.dp),
+                    verticalArrangement = Arrangement.spacedBy(16.dp)
+                ) {
+                    if (account.yearOfBirth != null) {
+                        Text(
+                            text = buildAnnotatedString {
+                                val value = if (account.yearOfBirth != null) {
+                                    account.yearOfBirth.toString()
+                                } else ""
+                                val text = stringResource(
+                                    id = org.openedx.profile.R.string.profile_year_of_birth,
+                                    value
+                                )
+                                append(text)
+                                addStyle(
+                                    style = SpanStyle(
+                                        color = MaterialTheme.appColors.textPrimaryVariant
+                                    ),
+                                    start = 0,
+                                    end = text.length - value.length
+                                )
+                            },
+                            style = MaterialTheme.appTypography.titleMedium,
+                            color = MaterialTheme.appColors.textPrimary
+                        )
+                    }
+                    if (account.bio.isNotEmpty()) {
+                        Text(
+                            text = buildAnnotatedString {
+                                val text = stringResource(
+                                    id = org.openedx.profile.R.string.profile_bio,
+                                    account.bio
+                                )
+                                append(text)
+                                addStyle(
+                                    style = SpanStyle(
+                                        color = MaterialTheme.appColors.textPrimaryVariant
+                                    ),
+                                    start = 0,
+                                    end = text.length - account.bio.length
+                                )
+                            },
+                            style = MaterialTheme.appTypography.titleMedium,
+                            color = MaterialTheme.appColors.textPrimary
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/profile/src/main/res/values-uk/strings.xml b/profile/src/main/res/values-uk/strings.xml
index 123d4aee6..1cbb0a60a 100644
--- a/profile/src/main/res/values-uk/strings.xml
+++ b/profile/src/main/res/values-uk/strings.xml
@@ -30,7 +30,7 @@
     <string name="profile_video_settings">Налаштування відео</string>
     <string name="profile_wifi_only_download">Завантаження тільки через Wi-Fi</string>
     <string name="profile_only_download_when_wifi_turned_on">Завантажуйте вміст лише тоді, коли ввімкнено wi-fi</string>
-    <string name="profile_video_download_quality">Якість завантаження відео</string>
+    <string name="profile_video_streaming_quality">Якість транслювання відео</string>
     <string name="profile_delete_account">Видалити акаунт</string>
     <string name="profile_you_want_to">Ви впевнені, що бажаєте</string>
     <string name="profile_delete_your_account">видалити свій акаунт?</string>
diff --git a/profile/src/main/res/values/strings.xml b/profile/src/main/res/values/strings.xml
index 9ad0c47c9..03f82fa8a 100644
--- a/profile/src/main/res/values/strings.xml
+++ b/profile/src/main/res/values/strings.xml
@@ -38,7 +38,7 @@
     <string name="profile_video_settings">Video settings</string>
     <string name="profile_wifi_only_download">Wi-fi only download</string>
     <string name="profile_only_download_when_wifi_turned_on">Only download content when wi-fi is turned on</string>
-    <string name="profile_video_download_quality">Video download quality</string>
+    <string name="profile_video_streaming_quality">Video streaming quality</string>
     <string name="profile_leave_profile">Leave profile?</string>
     <string name="profile_leave">Leave</string>
     <string name="profile_keep_editing">Keep editing</string>
diff --git a/profile/src/test/java/org/openedx/profile/presentation/profile/AnothersProfileViewModelTest.kt b/profile/src/test/java/org/openedx/profile/presentation/profile/AnothersProfileViewModelTest.kt
new file mode 100644
index 000000000..990248b2e
--- /dev/null
+++ b/profile/src/test/java/org/openedx/profile/presentation/profile/AnothersProfileViewModelTest.kt
@@ -0,0 +1,121 @@
+package org.openedx.profile.presentation.profile
+
+import androidx.arch.core.executor.testing.InstantTaskExecutorRule
+import io.mockk.coEvery
+import io.mockk.coVerify
+import io.mockk.every
+import io.mockk.mockk
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.test.*
+import org.junit.After
+import org.junit.Assert.assertEquals
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+import org.junit.rules.TestRule
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.domain.model.ProfileImage
+import org.openedx.core.system.ResourceManager
+import org.openedx.profile.domain.interactor.ProfileInteractor
+import org.openedx.profile.presentation.anothers_account.AnothersProfileUIState
+import org.openedx.profile.presentation.anothers_account.AnothersProfileViewModel
+import java.net.UnknownHostException
+
+@OptIn(ExperimentalCoroutinesApi::class)
+class AnothersProfileViewModelTest {
+
+    @get:Rule
+    val testInstantTaskExecutorRule: TestRule = InstantTaskExecutorRule()
+
+    private val dispatcher = StandardTestDispatcher()
+
+    private val resourceManager = mockk<ResourceManager>()
+    private val interactor = mockk<ProfileInteractor>()
+    private val username = "username"
+
+    private val account = org.openedx.profile.domain.model.Account(
+        username = "",
+        bio = "",
+        requiresParentalConsent = false,
+        name = "",
+        country = "",
+        isActive = true,
+        profileImage = ProfileImage("", "", "", "", false),
+        yearOfBirth = 2000,
+        levelOfEducation = "",
+        goals = "",
+        languageProficiencies = emptyList(),
+        gender = "",
+        mailingAddress = "",
+        email = "",
+        dateJoined = null,
+        accountPrivacy = org.openedx.profile.domain.model.Account.Privacy.PRIVATE
+    )
+
+    private val noInternet = "Slow or no internet connection"
+    private val somethingWrong = "Something went wrong"
+
+    @Before
+    fun setUp() {
+        Dispatchers.setMain(dispatcher)
+        every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
+        every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
+    }
+
+    @After
+    fun tearDown() {
+        Dispatchers.resetMain()
+    }
+
+    @Test
+    fun `getAccount no internetConnection`() = runTest {
+        val viewModel = AnothersProfileViewModel(
+            interactor,
+            resourceManager,
+            username
+        )
+        coEvery { interactor.getAccount(username) } throws UnknownHostException()
+        advanceUntilIdle()
+
+        coVerify(exactly = 1) { interactor.getAccount(username) }
+
+        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
+        assert(viewModel.uiState.value is AnothersProfileUIState.Loading)
+        assertEquals(noInternet, message?.message)
+    }
+
+    @Test
+    fun `getAccount unknown exception`() = runTest {
+        val viewModel = AnothersProfileViewModel(
+            interactor,
+            resourceManager,
+            username
+        )
+        coEvery { interactor.getAccount(username) } throws Exception()
+        advanceUntilIdle()
+
+        coVerify(exactly = 1) { interactor.getAccount(username) }
+
+        val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
+        assert(viewModel.uiState.value is AnothersProfileUIState.Loading)
+        assertEquals(somethingWrong, message?.message)
+    }
+
+    @Test
+    fun `getAccount success`() = runTest {
+        val viewModel = AnothersProfileViewModel(
+            interactor,
+            resourceManager,
+            username
+        )
+        coEvery { interactor.getAccount(username) } returns account
+        advanceUntilIdle()
+
+        coVerify(exactly = 1) { interactor.getAccount(username) }
+
+        assert(viewModel.uiState.value is AnothersProfileUIState.Data)
+        assert(viewModel.uiMessage.value == null)
+    }
+}
\ No newline at end of file
diff --git a/profile/src/test/java/org/openedx/profile/presentation/profile/ProfileViewModelTest.kt b/profile/src/test/java/org/openedx/profile/presentation/profile/ProfileViewModelTest.kt
index fa763d41f..45d346671 100644
--- a/profile/src/test/java/org/openedx/profile/presentation/profile/ProfileViewModelTest.kt
+++ b/profile/src/test/java/org/openedx/profile/presentation/profile/ProfileViewModelTest.kt
@@ -1,19 +1,10 @@
 package org.openedx.profile.presentation.profile
 
 import androidx.arch.core.executor.testing.InstantTaskExecutorRule
+import androidx.compose.ui.text.intl.Locale
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleOwner
 import androidx.lifecycle.LifecycleRegistry
-import org.openedx.core.R
-import org.openedx.core.UIMessage
-import org.openedx.profile.domain.model.Account
-import org.openedx.core.module.DownloadWorkerController
-import org.openedx.core.system.AppCookieManager
-import org.openedx.core.system.ResourceManager
-import org.openedx.profile.domain.interactor.ProfileInteractor
-import org.openedx.profile.presentation.ProfileAnalytics
-import org.openedx.profile.system.notifier.AccountUpdated
-import org.openedx.profile.system.notifier.ProfileNotifier
 import io.mockk.coEvery
 import io.mockk.coVerify
 import io.mockk.every
@@ -21,6 +12,7 @@ import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.emptyFlow
 import kotlinx.coroutines.flow.flow
 import kotlinx.coroutines.test.*
 import org.junit.After
@@ -29,8 +21,21 @@ import org.junit.Before
 import org.junit.Rule
 import org.junit.Test
 import org.junit.rules.TestRule
-import org.openedx.core.data.storage.CorePreferences
-import org.openedx.profile.data.storage.ProfilePreferences
+import org.openedx.core.R
+import org.openedx.core.UIMessage
+import org.openedx.core.config.Config
+import org.openedx.core.domain.model.AgreementUrls
+import org.openedx.core.domain.model.ProfileImage
+import org.openedx.core.module.DownloadWorkerController
+import org.openedx.core.presentation.global.AppData
+import org.openedx.core.system.AppCookieManager
+import org.openedx.core.system.ResourceManager
+import org.openedx.core.system.notifier.AppUpgradeNotifier
+import org.openedx.profile.domain.interactor.ProfileInteractor
+import org.openedx.profile.presentation.ProfileAnalytics
+import org.openedx.profile.presentation.ProfileRouter
+import org.openedx.profile.system.notifier.AccountUpdated
+import org.openedx.profile.system.notifier.ProfileNotifier
 import java.net.UnknownHostException
 
 @OptIn(ExperimentalCoroutinesApi::class)
@@ -40,17 +45,39 @@ class ProfileViewModelTest {
     val testInstantTaskExecutorRule: TestRule = InstantTaskExecutorRule()
 
     private val dispatcher = StandardTestDispatcher()
-    private val dispatcherIO = UnconfinedTestDispatcher()
 
+    private val config = mockk<Config>()
     private val resourceManager = mockk<ResourceManager>()
-    private val preferencesManager = mockk<ProfilePreferences>()
     private val interactor = mockk<ProfileInteractor>()
     private val notifier = mockk<ProfileNotifier>()
     private val cookieManager = mockk<AppCookieManager>()
     private val workerController = mockk<DownloadWorkerController>()
     private val analytics = mockk<ProfileAnalytics>()
-
-    private val account = mockk<Account>()
+    private val router = mockk<ProfileRouter>()
+    private val appUpgradeNotifier = mockk<AppUpgradeNotifier>()
+
+    private val appData = AppData(
+        versionName = "1.0.0",
+    )
+
+    private val account = org.openedx.profile.domain.model.Account(
+        username = "",
+        bio = "",
+        requiresParentalConsent = false,
+        name = "",
+        country = "",
+        isActive = true,
+        profileImage = ProfileImage("", "", "", "", false),
+        yearOfBirth = 2000,
+        levelOfEducation = "",
+        goals = "",
+        languageProficiencies = emptyList(),
+        gender = "",
+        mailingAddress = "",
+        email = "",
+        dateJoined = null,
+        accountPrivacy = org.openedx.profile.domain.model.Account.Privacy.PRIVATE
+    )
 
     private val noInternet = "Slow or no internet connection"
     private val somethingWrong = "Something went wrong"
@@ -60,6 +87,11 @@ class ProfileViewModelTest {
         Dispatchers.setMain(dispatcher)
         every { resourceManager.getString(R.string.core_error_no_connection) } returns noInternet
         every { resourceManager.getString(R.string.core_error_unknown_error) } returns somethingWrong
+        every { appUpgradeNotifier.notifier } returns emptyFlow()
+        every { config.isPreLoginExperienceEnabled() } returns false
+        every { config.getFeedbackEmailAddress() } returns ""
+        every { config.getAgreement(Locale.current.language) } returns AgreementUrls()
+        every { config.getFaqUrl() } returns ""
     }
 
     @After
@@ -69,22 +101,25 @@ class ProfileViewModelTest {
 
     @Test
     fun `getAccount no internetConnection and cache is null`() = runTest {
-        val viewModel =
-            ProfileViewModel(
-                interactor,
-                preferencesManager,
-                resourceManager,
-                notifier,
-                dispatcher,
-                cookieManager,
-                workerController,
-                analytics
-            )
-        coEvery { preferencesManager.profile } returns null
+        val viewModel = ProfileViewModel(
+            appData,
+            config,
+            interactor,
+            resourceManager,
+            notifier,
+            dispatcher,
+            cookieManager,
+            workerController,
+            analytics,
+            router,
+            appUpgradeNotifier
+        )
+        coEvery { interactor.getCachedAccount() } returns null
         coEvery { interactor.getAccount() } throws UnknownHostException()
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getAccount() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assert(viewModel.uiState.value is ProfileUIState.Loading)
@@ -93,22 +128,25 @@ class ProfileViewModelTest {
 
     @Test
     fun `getAccount no internetConnection and cache is not null`() = runTest {
-        val viewModel =
-            ProfileViewModel(
-                interactor,
-                preferencesManager,
-                resourceManager,
-                notifier,
-                dispatcher,
-                cookieManager,
-                workerController,
-                analytics
-            )
-        coEvery { preferencesManager.profile } returns account
+        val viewModel = ProfileViewModel(
+            appData,
+            config,
+            interactor,
+            resourceManager,
+            notifier,
+            dispatcher,
+            cookieManager,
+            workerController,
+            analytics,
+            router,
+            appUpgradeNotifier
+        )
+        coEvery { interactor.getCachedAccount() } returns account
         coEvery { interactor.getAccount() } throws UnknownHostException()
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getAccount() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assert(viewModel.uiState.value is ProfileUIState.Data)
@@ -117,22 +155,25 @@ class ProfileViewModelTest {
 
     @Test
     fun `getAccount unknown exception`() = runTest {
-        val viewModel =
-            ProfileViewModel(
-                interactor,
-                preferencesManager,
-                resourceManager,
-                notifier,
-                dispatcher,
-                cookieManager,
-                workerController,
-                analytics
-            )
-        coEvery { preferencesManager.profile } returns null
+        val viewModel = ProfileViewModel(
+            appData,
+            config,
+            interactor,
+            resourceManager,
+            notifier,
+            dispatcher,
+            cookieManager,
+            workerController,
+            analytics,
+            router,
+            appUpgradeNotifier
+        )
+        coEvery { interactor.getCachedAccount() } returns null
         coEvery { interactor.getAccount() } throws Exception()
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getAccount() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assert(viewModel.uiState.value is ProfileUIState.Loading)
@@ -141,23 +182,25 @@ class ProfileViewModelTest {
 
     @Test
     fun `getAccount success`() = runTest {
-        val viewModel =
-            ProfileViewModel(
-                interactor,
-                preferencesManager,
-                resourceManager,
-                notifier,
-                dispatcher,
-                cookieManager,
-                workerController,
-                analytics
-            )
-        coEvery { preferencesManager.profile } returns null
+        val viewModel = ProfileViewModel(
+            appData,
+            config,
+            interactor,
+            resourceManager,
+            notifier,
+            dispatcher,
+            cookieManager,
+            workerController,
+            analytics,
+            router,
+            appUpgradeNotifier
+        )
+        coEvery { interactor.getCachedAccount() } returns null
         coEvery { interactor.getAccount() } returns account
-        every { preferencesManager.profile = any() } returns Unit
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.getAccount() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         assert(viewModel.uiState.value is ProfileUIState.Data)
         assert(viewModel.uiMessage.value == null)
@@ -165,71 +208,84 @@ class ProfileViewModelTest {
 
     @Test
     fun `logout no internet connection`() = runTest {
-        val viewModel =
-            ProfileViewModel(
-                interactor,
-                preferencesManager,
-                resourceManager,
-                notifier,
-                dispatcher,
-                cookieManager,
-                workerController,
-                analytics
-            )
+        val viewModel = ProfileViewModel(
+            appData,
+            config,
+            interactor,
+            resourceManager,
+            notifier,
+            dispatcher,
+            cookieManager,
+            workerController,
+            analytics,
+            router,
+            appUpgradeNotifier
+        )
         coEvery { interactor.logout() } throws UnknownHostException()
         coEvery { workerController.cancelWork() } returns Unit
-
+        every { analytics.logoutEvent(false) } returns Unit
+        every { cookieManager.clearWebViewCookie() } returns Unit
         viewModel.logout()
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.logout() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assertEquals(noInternet, message?.message)
-        assert(viewModel.successLogout.value == null)
+        assert(viewModel.successLogout.value == true)
     }
 
     @Test
     fun `logout unknown exception`() = runTest {
-        val viewModel =
-            ProfileViewModel(
-                interactor,
-                preferencesManager,
-                resourceManager,
-                notifier,
-                dispatcher,
-                cookieManager,
-                workerController,
-                analytics
-            )
+        val viewModel = ProfileViewModel(
+            appData,
+            config,
+            interactor,
+            resourceManager,
+            notifier,
+            dispatcher,
+            cookieManager,
+            workerController,
+            analytics,
+            router,
+            appUpgradeNotifier
+        )
         coEvery { interactor.logout() } throws Exception()
         coEvery { workerController.cancelWork() } returns Unit
+        every { analytics.logoutEvent(false) } returns Unit
+        every { cookieManager.clearWebViewCookie() } returns Unit
         viewModel.logout()
         advanceUntilIdle()
 
         coVerify(exactly = 1) { interactor.logout() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
+        verify(exactly = 1) { cookieManager.clearWebViewCookie() }
+        verify { analytics.logoutEvent(false) }
 
         val message = viewModel.uiMessage.value as? UIMessage.SnackBarMessage
         assertEquals(somethingWrong, message?.message)
-        assert(viewModel.successLogout.value == null)
+        assert(viewModel.successLogout.value == true)
     }
 
     @Test
     fun `logout success`() = runTest {
         val viewModel = ProfileViewModel(
+            appData,
+            config,
             interactor,
-            preferencesManager,
             resourceManager,
             notifier,
             dispatcher,
             cookieManager,
             workerController,
-            analytics
+            analytics,
+            router,
+            appUpgradeNotifier
         )
-        coEvery { preferencesManager.profile } returns mockk()
+        coEvery { interactor.getCachedAccount() } returns mockk()
         coEvery { interactor.getAccount() } returns mockk()
         every { analytics.logoutEvent(false) } returns Unit
-        every { preferencesManager.profile = any() } returns Unit
         coEvery { interactor.logout() } returns Unit
         coEvery { workerController.cancelWork() } returns Unit
         every { cookieManager.clearWebViewCookie() } returns Unit
@@ -237,6 +293,8 @@ class ProfileViewModelTest {
         advanceUntilIdle()
         coVerify(exactly = 1) { interactor.logout() }
         verify { analytics.logoutEvent(false) }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
+        verify(exactly = 1) { cookieManager.clearWebViewCookie() }
 
         assert(viewModel.uiMessage.value == null)
         assert(viewModel.successLogout.value == true)
@@ -245,16 +303,19 @@ class ProfileViewModelTest {
     @Test
     fun `AccountUpdated notifier test`() = runTest {
         val viewModel = ProfileViewModel(
+            appData,
+            config,
             interactor,
-            preferencesManager,
             resourceManager,
             notifier,
             dispatcher,
             cookieManager,
             workerController,
-            analytics
+            analytics,
+            router,
+            appUpgradeNotifier
         )
-        coEvery { preferencesManager.profile } returns null
+        coEvery { interactor.getCachedAccount() } returns null
         every { notifier.notifier } returns flow { emit(AccountUpdated()) }
         val mockLifeCycleOwner: LifecycleOwner = mockk()
         val lifecycleRegistry = LifecycleRegistry(mockLifeCycleOwner)
@@ -264,6 +325,6 @@ class ProfileViewModelTest {
         advanceUntilIdle()
 
         coVerify(exactly = 2) { interactor.getAccount() }
+        verify(exactly = 1) { appUpgradeNotifier.notifier }
     }
-
-}
\ No newline at end of file
+}
diff --git a/settings.gradle b/settings.gradle
index 1bb570281..e0a869615 100644
--- a/settings.gradle
+++ b/settings.gradle
@@ -4,12 +4,24 @@ pluginManagement {
         google()
         mavenCentral()
     }
+    buildscript {
+        repositories {
+            mavenCentral()
+            maven {
+                url = uri("https://storage.googleapis.com/r8-releases/raw")
+            }
+        }
+        dependencies {
+            classpath("com.android.tools:r8:8.2.26")
+        }
+    }
 }
 dependencyResolutionManagement {
     repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
     repositories {
         google()
         mavenCentral()
+        maven { url "https://pkgs.dev.azure.com/MicrosoftDeviceSDK/DuoSDK-Public/_packaging/Duo-SDK-Feed/maven/v1" }
     }
 }
 rootProject.name = "OpenEdX"
@@ -21,3 +33,4 @@ include ':dashboard'
 include ':discovery'
 include ':profile'
 include ':discussion'
+include ':whatsnew'
diff --git a/whatsnew/.gitignore b/whatsnew/.gitignore
new file mode 100644
index 000000000..42afabfd2
--- /dev/null
+++ b/whatsnew/.gitignore
@@ -0,0 +1 @@
+/build
\ No newline at end of file
diff --git a/whatsnew/build.gradle b/whatsnew/build.gradle
new file mode 100644
index 000000000..4a400063e
--- /dev/null
+++ b/whatsnew/build.gradle
@@ -0,0 +1,68 @@
+plugins {
+    id 'com.android.library'
+    id 'org.jetbrains.kotlin.android'
+    id 'kotlin-parcelize'
+}
+
+android {
+    namespace 'org.openedx.whatsnew'
+    compileSdk 34
+
+    defaultConfig {
+        minSdk 24
+        targetSdk 34
+
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        consumerProguardFiles "consumer-rules.pro"
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled true
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+
+    kotlinOptions {
+        jvmTarget = JavaVersion.VERSION_17
+    }
+
+    buildFeatures {
+        viewBinding true
+        compose true
+    }
+
+    composeOptions {
+        kotlinCompilerExtensionVersion = "$compose_compiler_version"
+    }
+
+    flavorDimensions += "env"
+    productFlavors {
+        prod {
+            dimension 'env'
+        }
+        develop {
+            dimension 'env'
+        }
+        stage {
+            dimension 'env'
+        }
+    }
+}
+
+dependencies {
+    implementation project(path: ":core")
+
+    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
+    testImplementation "junit:junit:$junit_version"
+    testImplementation "io.mockk:mockk:$mockk_version"
+    testImplementation "io.mockk:mockk-android:$mockk_version"
+    testImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:$coroutines_version"
+    testImplementation "androidx.arch.core:core-testing:$android_arch_version"
+}
\ No newline at end of file
diff --git a/whatsnew/consumer-rules.pro b/whatsnew/consumer-rules.pro
new file mode 100644
index 000000000..e69de29bb
diff --git a/whatsnew/proguard-rules.pro b/whatsnew/proguard-rules.pro
new file mode 100644
index 000000000..481bb4348
--- /dev/null
+++ b/whatsnew/proguard-rules.pro
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
\ No newline at end of file
diff --git a/whatsnew/src/androidTest/java/org/openedx/whatsnew/ExampleInstrumentedTest.kt b/whatsnew/src/androidTest/java/org/openedx/whatsnew/ExampleInstrumentedTest.kt
new file mode 100644
index 000000000..5b65b0c9d
--- /dev/null
+++ b/whatsnew/src/androidTest/java/org/openedx/whatsnew/ExampleInstrumentedTest.kt
@@ -0,0 +1,24 @@
+package org.openedx.whatsnew
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("org.openedx.whatsnew.test", appContext.packageName)
+    }
+}
\ No newline at end of file
diff --git a/whatsnew/src/main/AndroidManifest.xml b/whatsnew/src/main/AndroidManifest.xml
new file mode 100644
index 000000000..44008a433
--- /dev/null
+++ b/whatsnew/src/main/AndroidManifest.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest>
+
+</manifest>
\ No newline at end of file
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/WhatsNewManager.kt b/whatsnew/src/main/java/org/openedx/whatsnew/WhatsNewManager.kt
new file mode 100644
index 000000000..71a51d3b6
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/WhatsNewManager.kt
@@ -0,0 +1,31 @@
+package org.openedx.whatsnew
+
+import android.content.Context
+import com.google.gson.Gson
+import org.openedx.core.config.Config
+import org.openedx.core.presentation.global.AppData
+import org.openedx.core.presentation.global.WhatsNewGlobalManager
+import org.openedx.whatsnew.data.model.WhatsNewItem
+import org.openedx.whatsnew.data.storage.WhatsNewPreferences
+
+class WhatsNewManager(
+    private val context: Context,
+    private val config: Config,
+    private val whatsNewPreferences: WhatsNewPreferences,
+    private val appData: AppData
+) : WhatsNewGlobalManager {
+    fun getNewestData(): org.openedx.whatsnew.domain.model.WhatsNewItem {
+        val jsonString = context.resources.openRawResource(R.raw.whats_new)
+            .bufferedReader()
+            .use { it.readText() }
+        val whatsNewListData = Gson().fromJson(jsonString, Array<WhatsNewItem>::class.java)
+        return whatsNewListData[0].mapToDomain(context)
+    }
+
+    override fun shouldShowWhatsNew(): Boolean {
+        val dataVersion = getNewestData().version
+        return appData.versionName == dataVersion
+                && whatsNewPreferences.lastWhatsNewVersion != dataVersion
+                && config.isWhatsNewEnabled()
+    }
+}
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/WhatsNewRouter.kt b/whatsnew/src/main/java/org/openedx/whatsnew/WhatsNewRouter.kt
new file mode 100644
index 000000000..46bbe3d3d
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/WhatsNewRouter.kt
@@ -0,0 +1,7 @@
+package org.openedx.whatsnew
+
+import androidx.fragment.app.FragmentManager
+
+interface WhatsNewRouter {
+    fun navigateToMain(fm: FragmentManager, courseId: String? = null)
+}
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/data/model/WhatsNewItem.kt b/whatsnew/src/main/java/org/openedx/whatsnew/data/model/WhatsNewItem.kt
new file mode 100644
index 000000000..e0c029d53
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/data/model/WhatsNewItem.kt
@@ -0,0 +1,16 @@
+package org.openedx.whatsnew.data.model
+
+import android.content.Context
+import com.google.gson.annotations.SerializedName
+
+data class WhatsNewItem(
+    @SerializedName("version")
+    val version: String,
+    @SerializedName("messages")
+    val messages: List<WhatsNewMessage>
+) {
+    fun mapToDomain(context: Context) = org.openedx.whatsnew.domain.model.WhatsNewItem(
+        version = version,
+        messages = messages.map { it.mapToDomain(context) }
+    )
+}
\ No newline at end of file
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/data/model/WhatsNewMessage.kt b/whatsnew/src/main/java/org/openedx/whatsnew/data/model/WhatsNewMessage.kt
new file mode 100644
index 000000000..da9b0676d
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/data/model/WhatsNewMessage.kt
@@ -0,0 +1,28 @@
+package org.openedx.whatsnew.data.model
+
+import android.content.Context
+import com.google.gson.annotations.SerializedName
+
+data class WhatsNewMessage(
+    @SerializedName("image")
+    val image: String,
+    @SerializedName("title")
+    val title: String,
+    @SerializedName("message")
+    val message: String
+) {
+    fun mapToDomain(context: Context) = org.openedx.whatsnew.domain.model.WhatsNewMessage(
+        image = getDrawableIntFromString(context, image),
+        title = title,
+        message = message
+    )
+
+    private fun getDrawableIntFromString(context: Context, imageName: String): Int {
+        val imageInt = context.resources.getIdentifier(imageName, "drawable", context.packageName)
+        return if (imageInt == 0) {
+            org.openedx.core.R.drawable.core_no_image_course
+        } else {
+            imageInt
+        }
+    }
+}
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/data/storage/WhatsNewPreferences.kt b/whatsnew/src/main/java/org/openedx/whatsnew/data/storage/WhatsNewPreferences.kt
new file mode 100644
index 000000000..6270f809e
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/data/storage/WhatsNewPreferences.kt
@@ -0,0 +1,5 @@
+package org.openedx.whatsnew.data.storage
+
+interface WhatsNewPreferences {
+    var lastWhatsNewVersion: String
+}
\ No newline at end of file
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/domain/model/WhatsNewItem.kt b/whatsnew/src/main/java/org/openedx/whatsnew/domain/model/WhatsNewItem.kt
new file mode 100644
index 000000000..7b59b54d8
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/domain/model/WhatsNewItem.kt
@@ -0,0 +1,6 @@
+package org.openedx.whatsnew.domain.model
+
+data class WhatsNewItem(
+    val version: String,
+    val messages: List<WhatsNewMessage>
+)
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/domain/model/WhatsNewMessage.kt b/whatsnew/src/main/java/org/openedx/whatsnew/domain/model/WhatsNewMessage.kt
new file mode 100644
index 000000000..5f311a23a
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/domain/model/WhatsNewMessage.kt
@@ -0,0 +1,10 @@
+package org.openedx.whatsnew.domain.model
+
+import androidx.annotation.DrawableRes
+
+data class WhatsNewMessage(
+    @DrawableRes
+    val image: Int,
+    val title: String,
+    val message: String
+)
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt
new file mode 100644
index 000000000..a76ff9a10
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/ui/WhatsNewUI.kt
@@ -0,0 +1,314 @@
+package org.openedx.whatsnew.presentation.ui
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.OutlinedButton
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appShapes
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.whatsnew.R
+
+@Composable
+fun PageIndicator(
+    numberOfPages: Int,
+    modifier: Modifier = Modifier,
+    selectedPage: Int = 0,
+    selectedColor: Color = MaterialTheme.appColors.info,
+    previousUnselectedColor: Color = MaterialTheme.appColors.cardViewBorder,
+    nextUnselectedColor: Color = MaterialTheme.appColors.textFieldBorder,
+    defaultRadius: Dp = 20.dp,
+    selectedLength: Dp = 60.dp,
+    space: Dp = 30.dp,
+    animationDurationInMillis: Int = 300,
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(space),
+        modifier = modifier,
+    ) {
+        for (i in 0 until numberOfPages) {
+            val isSelected = i == selectedPage
+            val unselectedColor =
+                if (i < selectedPage) previousUnselectedColor else nextUnselectedColor
+            PageIndicatorView(
+                isSelected = isSelected,
+                selectedColor = selectedColor,
+                defaultColor = unselectedColor,
+                defaultRadius = defaultRadius,
+                selectedLength = selectedLength,
+                animationDurationInMillis = animationDurationInMillis,
+            )
+        }
+    }
+}
+
+@Composable
+fun PageIndicatorView(
+    isSelected: Boolean,
+    selectedColor: Color,
+    defaultColor: Color,
+    defaultRadius: Dp,
+    selectedLength: Dp,
+    animationDurationInMillis: Int,
+    modifier: Modifier = Modifier,
+) {
+
+    val color: Color by animateColorAsState(
+        targetValue = if (isSelected) {
+            selectedColor
+        } else {
+            defaultColor
+        },
+        animationSpec = tween(
+            durationMillis = animationDurationInMillis,
+        ),
+        label = ""
+    )
+    val width: Dp by animateDpAsState(
+        targetValue = if (isSelected) {
+            selectedLength
+        } else {
+            defaultRadius
+        },
+        animationSpec = tween(
+            durationMillis = animationDurationInMillis,
+        ),
+        label = ""
+    )
+
+    Canvas(
+        modifier = modifier
+            .size(
+                width = width,
+                height = defaultRadius,
+            ),
+    ) {
+        drawRoundRect(
+            color = color,
+            topLeft = Offset.Zero,
+            size = Size(
+                width = width.toPx(),
+                height = defaultRadius.toPx(),
+            ),
+            cornerRadius = CornerRadius(
+                x = defaultRadius.toPx(),
+                y = defaultRadius.toPx(),
+            ),
+        )
+    }
+}
+
+@Composable
+fun NavigationUnitsButtons(
+    hasPrevPage: Boolean,
+    hasNextPage: Boolean,
+    onPrevClick: () -> Unit,
+    onNextClick: () -> Unit
+) {
+    Row(
+        modifier = Modifier.padding(horizontal = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(24.dp)
+    ) {
+        PrevButton(
+            hasPrevPage = hasPrevPage,
+            onPrevClick = onPrevClick
+        )
+        NextFinishButton(
+            hasNextPage = hasNextPage,
+            onNextClick = onNextClick
+        )
+    }
+}
+
+@Composable
+fun PrevButton(
+    hasPrevPage: Boolean,
+    onPrevClick: () -> Unit
+) {
+    val prevButtonAnimationFactor by animateFloatAsState(
+        targetValue = if (hasPrevPage) 1f else 0f,
+        animationSpec = tween(300),
+        label = ""
+    )
+
+    OutlinedButton(
+        modifier = Modifier
+            .testTag("btn_previous")
+            .height(42.dp)
+            .alpha(prevButtonAnimationFactor),
+        colors = ButtonDefaults.outlinedButtonColors(
+            backgroundColor = MaterialTheme.appColors.background
+        ),
+        border = BorderStroke(1.dp, MaterialTheme.appColors.primary),
+        elevation = null,
+        shape = MaterialTheme.appShapes.navigationButtonShape,
+        onClick = onPrevClick,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center
+        ) {
+            Icon(
+                painter = painterResource(id = org.openedx.core.R.drawable.core_ic_back),
+                contentDescription = null,
+                tint = MaterialTheme.appColors.primary
+            )
+            Spacer(Modifier.width(8.dp))
+            Text(
+                text = stringResource(R.string.whats_new_navigation_previous),
+                color = MaterialTheme.appColors.primary,
+                style = MaterialTheme.appTypography.labelLarge
+            )
+        }
+    }
+}
+
+@Composable
+fun NextFinishButton(
+    onNextClick: () -> Unit,
+    hasNextPage: Boolean
+) {
+    Button(
+        modifier = Modifier
+            .testTag("btn_next")
+            .height(42.dp),
+        colors = ButtonDefaults.buttonColors(
+            backgroundColor = MaterialTheme.appColors.buttonBackground
+        ),
+        elevation = null,
+        shape = MaterialTheme.appShapes.navigationButtonShape,
+        onClick = onNextClick
+    ) {
+        AnimatedContent(
+            targetState = hasNextPage,
+            transitionSpec = {
+                fadeIn() togetherWith fadeOut()
+            },
+            label = ""
+        ) { hasNextPage ->
+            if (hasNextPage) {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        modifier = Modifier.testTag("txt_next"),
+                        text = stringResource(id = R.string.whats_new_navigation_next),
+                        color = MaterialTheme.appColors.buttonText,
+                        style = MaterialTheme.appTypography.labelLarge
+                    )
+                    Spacer(Modifier.width(8.dp))
+                    Icon(
+                        painter = painterResource(id = org.openedx.core.R.drawable.core_ic_forward),
+                        contentDescription = null,
+                        tint = MaterialTheme.appColors.buttonText
+                    )
+                }
+            } else {
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center
+                ) {
+                    Text(
+                        modifier = Modifier.testTag("txt_done"),
+                        text = stringResource(id = R.string.whats_new_navigation_done),
+                        color = MaterialTheme.appColors.buttonText,
+                        style = MaterialTheme.appTypography.labelLarge
+                    )
+                    Spacer(Modifier.width(8.dp))
+                    Icon(
+                        painter = painterResource(id = org.openedx.core.R.drawable.core_ic_check),
+                        contentDescription = null,
+                        tint = MaterialTheme.appColors.buttonText
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun NavigationUnitsButtonsPrevInTheMiddle() {
+    OpenEdXTheme {
+        NavigationUnitsButtons(
+            hasPrevPage = true,
+            hasNextPage = true,
+            onPrevClick = {},
+            onNextClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun NavigationUnitsButtonsPrevInTheStart() {
+    OpenEdXTheme {
+        NavigationUnitsButtons(
+            hasPrevPage = false,
+            hasNextPage = true,
+            onPrevClick = {},
+            onNextClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun NavigationUnitsButtonsPrevInTheEnd() {
+    OpenEdXTheme {
+        NavigationUnitsButtons(
+            hasPrevPage = true,
+            hasNextPage = false,
+            onPrevClick = {},
+            onNextClick = {}
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PageIndicatorViewPreview() {
+    OpenEdXTheme {
+        PageIndicator(
+            numberOfPages = 4, selectedPage = 2
+        )
+    }
+}
\ No newline at end of file
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/presentation/whatsnew/WhatsNewFragment.kt b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/whatsnew/WhatsNewFragment.kt
new file mode 100644
index 000000000..d1d69b861
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/whatsnew/WhatsNewFragment.kt
@@ -0,0 +1,496 @@
+package org.openedx.whatsnew.presentation.whatsnew
+
+import android.content.res.Configuration
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.compose.animation.Crossfade
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.testTagsAsResourceId
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.core.os.bundleOf
+import androidx.fragment.app.Fragment
+import kotlinx.coroutines.launch
+import org.koin.android.ext.android.inject
+import org.koin.androidx.viewmodel.ext.android.viewModel
+import org.koin.core.parameter.parametersOf
+import org.openedx.core.presentation.global.AppData
+import org.openedx.core.ui.WindowSize
+import org.openedx.core.ui.calculateCurrentOffsetForPage
+import org.openedx.core.ui.rememberWindowSize
+import org.openedx.core.ui.statusBarsInset
+import org.openedx.core.ui.theme.OpenEdXTheme
+import org.openedx.core.ui.theme.appColors
+import org.openedx.core.ui.theme.appTypography
+import org.openedx.core.ui.windowSizeValue
+import org.openedx.whatsnew.WhatsNewRouter
+import org.openedx.whatsnew.data.storage.WhatsNewPreferences
+import org.openedx.whatsnew.domain.model.WhatsNewItem
+import org.openedx.whatsnew.domain.model.WhatsNewMessage
+import org.openedx.whatsnew.presentation.ui.NavigationUnitsButtons
+import org.openedx.whatsnew.presentation.ui.PageIndicator
+
+class WhatsNewFragment : Fragment() {
+
+    private val viewModel: WhatsNewViewModel by viewModel {
+        parametersOf(requireArguments().getString(ARG_COURSE_ID, null))
+    }
+    private val preferencesManager by inject<WhatsNewPreferences>()
+    private val router by inject<WhatsNewRouter>()
+    private val appData: AppData by inject()
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?,
+    ) = ComposeView(requireContext()).apply {
+        setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+        setContent {
+            OpenEdXTheme {
+                val windowSize = rememberWindowSize()
+                val whatsNewItem = viewModel.whatsNewItem
+                WhatsNewScreen(
+                    windowSize = windowSize,
+                    whatsNewItem = whatsNewItem.value,
+                    onCloseClick = {
+                        val versionName = appData.versionName
+                        preferencesManager.lastWhatsNewVersion = versionName
+                        router.navigateToMain(parentFragmentManager, viewModel.courseId)
+                    }
+                )
+            }
+        }
+    }
+
+    companion object {
+        private const val ARG_COURSE_ID = "courseId"
+        fun newInstance(courseId: String? = null): WhatsNewFragment {
+            val fragment = WhatsNewFragment()
+            fragment.arguments = bundleOf(
+                ARG_COURSE_ID to courseId
+            )
+            return fragment
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class, ExperimentalComposeUiApi::class)
+@Composable
+fun WhatsNewScreen(
+    windowSize: WindowSize,
+    whatsNewItem: WhatsNewItem?,
+    onCloseClick: () -> Unit
+) {
+    whatsNewItem?.let { item ->
+        OpenEdXTheme {
+            val scaffoldState = rememberScaffoldState()
+            val pagerState = rememberPagerState {
+                whatsNewItem.messages.size
+            }
+
+            Scaffold(
+                modifier = Modifier
+                    .semantics {
+                        testTagsAsResourceId = true
+                    }
+                    .fillMaxSize(),
+                scaffoldState = scaffoldState,
+                topBar = {
+                    WhatsNewTopBar(
+                        windowSize = windowSize,
+                        onCloseClick = onCloseClick
+                    )
+                },
+                content = { paddingValues ->
+                    val configuration = LocalConfiguration.current
+                    when (configuration.orientation) {
+                        Configuration.ORIENTATION_LANDSCAPE ->
+                            WhatsNewScreenLandscape(
+                                modifier = Modifier.padding(paddingValues),
+                                whatsNewItem = item,
+                                pagerState = pagerState,
+                                onCloseClick = onCloseClick
+                            )
+
+                        else ->
+                            WhatsNewScreenPortrait(
+                                modifier = Modifier.padding(paddingValues),
+                                whatsNewItem = item,
+                                pagerState = pagerState,
+                                onCloseClick = onCloseClick
+                            )
+                    }
+                }
+            )
+        }
+    }
+}
+
+@Composable
+private fun WhatsNewTopBar(
+    windowSize: WindowSize,
+    onCloseClick: () -> Unit
+) {
+    val topBarWidth by remember(key1 = windowSize) {
+        mutableStateOf(
+            windowSize.windowSizeValue(
+                expanded = Modifier.widthIn(Dp.Unspecified, 560.dp),
+                compact = Modifier
+                    .fillMaxWidth()
+            )
+        )
+    }
+
+    OpenEdXTheme {
+        Column(
+            Modifier
+                .fillMaxWidth()
+                .statusBarsInset(),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Box(
+                modifier = Modifier
+                    .then(topBarWidth),
+                contentAlignment = Alignment.CenterEnd
+            ) {
+                Text(
+                    modifier = Modifier
+                        .testTag("txt_screen_title")
+                        .fillMaxWidth(),
+                    text = stringResource(id = org.openedx.whatsnew.R.string.whats_new_title),
+                    textAlign = TextAlign.Center,
+                    color = MaterialTheme.appColors.textPrimary,
+                    style = MaterialTheme.appTypography.titleMedium
+                )
+                IconButton(
+                    modifier = Modifier
+                        .testTag("ib_close")
+                        .padding(end = 16.dp),
+                    onClick = onCloseClick
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Close,
+                        contentDescription = stringResource(id = org.openedx.core.R.string.core_cancel),
+                        tint = MaterialTheme.appColors.primary
+                    )
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+private fun WhatsNewScreenPortrait(
+    modifier: Modifier = Modifier,
+    whatsNewItem: WhatsNewItem,
+    pagerState: PagerState,
+    onCloseClick: () -> Unit
+) {
+    OpenEdXTheme {
+        val coroutineScope = rememberCoroutineScope()
+        val message = whatsNewItem.messages[pagerState.currentPage]
+
+        Box(
+            modifier = modifier
+                .fillMaxSize()
+                .background(MaterialTheme.appColors.background),
+            contentAlignment = Alignment.TopCenter
+        ) {
+            HorizontalPager(
+                modifier = Modifier.fillMaxSize(),
+                verticalAlignment = Alignment.Top,
+                state = pagerState
+            ) { page ->
+                val image = whatsNewItem.messages[page].image
+                Image(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 36.dp, vertical = 48.dp),
+                    painter = painterResource(id = image),
+                    contentDescription = null
+                )
+            }
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 24.dp, vertical = 120.dp),
+                contentAlignment = Alignment.BottomCenter
+            ) {
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.spacedBy(20.dp),
+                ) {
+                    PageIndicator(
+                        numberOfPages = pagerState.pageCount,
+                        selectedPage = pagerState.currentPage,
+                        defaultRadius = 12.dp,
+                        selectedLength = 24.dp,
+                        space = 4.dp,
+                        animationDurationInMillis = 500,
+                    )
+
+                    Crossfade(
+                        targetState = message,
+                        modifier = Modifier.fillMaxWidth(),
+                        label = ""
+                    ) { targetText ->
+                        Column(
+                            verticalArrangement = Arrangement.spacedBy(24.dp)
+                        ) {
+                            Text(
+                                modifier = Modifier
+                                    .testTag("txt_whats_new_title")
+                                    .fillMaxWidth(),
+                                text = targetText.title,
+                                color = MaterialTheme.appColors.textPrimary,
+                                textAlign = TextAlign.Center,
+                                style = MaterialTheme.appTypography.titleMedium
+                            )
+                            Text(
+                                modifier = Modifier
+                                    .testTag("txt_whats_new_description")
+                                    .fillMaxWidth()
+                                    .height(80.dp),
+                                text = targetText.message,
+                                color = MaterialTheme.appColors.textPrimary,
+                                textAlign = TextAlign.Center,
+                                style = MaterialTheme.appTypography.bodyMedium
+                            )
+                        }
+                    }
+
+                    NavigationUnitsButtons(
+                        hasPrevPage = pagerState.canScrollBackward && pagerState.currentPage != 0,
+                        hasNextPage = pagerState.canScrollForward,
+                        onPrevClick = remember {
+                            {
+                                coroutineScope.launch {
+                                    pagerState.animateScrollToPage(pagerState.currentPage - 1)
+                                }
+                            }
+                        },
+                        onNextClick = remember {
+                            {
+                                if (pagerState.canScrollForward) {
+                                    coroutineScope.launch {
+                                        pagerState.animateScrollToPage(pagerState.currentPage + 1)
+                                    }
+                                } else {
+                                    onCloseClick()
+                                }
+                            }
+                        }
+                    )
+                }
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+private fun WhatsNewScreenLandscape(
+    modifier: Modifier = Modifier,
+    whatsNewItem: WhatsNewItem,
+    pagerState: PagerState,
+    onCloseClick: () -> Unit
+) {
+    OpenEdXTheme {
+        val coroutineScope = rememberCoroutineScope()
+        val message = whatsNewItem.messages[pagerState.currentPage]
+
+        Column(
+            modifier = modifier
+                .fillMaxSize()
+                .background(MaterialTheme.appColors.background),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Box(
+                modifier = Modifier.weight(1f),
+                contentAlignment = Alignment.CenterEnd
+            ) {
+                HorizontalPager(
+                    verticalAlignment = Alignment.CenterVertically,
+                    state = pagerState
+                ) { page ->
+                    val image = whatsNewItem.messages[page].image
+                    val alpha = (0.2f + pagerState.calculateCurrentOffsetForPage(page)) * 10
+                    Image(
+                        modifier = Modifier
+                            .alpha(alpha)
+                            .fillMaxHeight()
+                            .padding(vertical = 24.dp)
+                            .padding(start = 140.dp),
+                        painter = painterResource(id = image),
+                        contentDescription = null
+                    )
+                }
+                Box(
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .width(400.dp)
+                        .padding(end = 140.dp),
+                    contentAlignment = Alignment.CenterEnd
+                ) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.spacedBy(20.dp),
+                    ) {
+                        Crossfade(
+                            targetState = message,
+                            modifier = Modifier.fillMaxWidth(),
+                            label = ""
+                        ) { targetText ->
+                            Column(
+                                verticalArrangement = Arrangement.spacedBy(24.dp)
+                            ) {
+                                Text(
+                                    modifier = Modifier
+                                        .fillMaxWidth(),
+                                    text = targetText.title,
+                                    color = MaterialTheme.appColors.textPrimary,
+                                    textAlign = TextAlign.Center,
+                                    style = MaterialTheme.appTypography.titleMedium
+                                )
+                                Text(
+                                    modifier = Modifier
+                                        .fillMaxWidth()
+                                        .height(80.dp),
+                                    text = targetText.message,
+                                    color = MaterialTheme.appColors.textPrimary,
+                                    textAlign = TextAlign.Center,
+                                    style = MaterialTheme.appTypography.bodyMedium
+                                )
+                            }
+                        }
+
+                        NavigationUnitsButtons(
+                            hasPrevPage = pagerState.canScrollBackward && pagerState.currentPage != 0,
+                            hasNextPage = pagerState.canScrollForward,
+                            onPrevClick = remember {
+                                {
+                                    coroutineScope.launch {
+                                        pagerState.animateScrollToPage(pagerState.currentPage - 1)
+                                    }
+                                }
+                            },
+                            onNextClick = remember {
+                                {
+                                    if (pagerState.canScrollForward) {
+                                        coroutineScope.launch {
+                                            pagerState.animateScrollToPage(pagerState.currentPage + 1)
+                                        }
+                                    } else {
+                                        onCloseClick()
+                                    }
+                                }
+                            }
+                        )
+                    }
+                }
+            }
+
+            PageIndicator(
+                modifier = Modifier.weight(0.25f),
+                numberOfPages = pagerState.pageCount,
+                selectedPage = pagerState.currentPage,
+                defaultRadius = 12.dp,
+                selectedLength = 24.dp,
+                space = 4.dp,
+                animationDurationInMillis = 500,
+            )
+        }
+    }
+}
+
+val whatsNewMessagePreview = WhatsNewMessage(
+    image = org.openedx.core.R.drawable.core_no_image_course,
+    title = "title",
+    message = "Message message message"
+)
+val whatsNewItemPreview = WhatsNewItem(
+    version = "1.0",
+    messages = listOf(whatsNewMessagePreview, whatsNewMessagePreview, whatsNewMessagePreview)
+)
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun WhatsNewPortraitPreview() {
+    OpenEdXTheme {
+        WhatsNewScreenPortrait(
+            whatsNewItem = whatsNewItemPreview,
+            onCloseClick = {},
+            pagerState = rememberPagerState { 4 }
+        )
+    }
+}
+
+@OptIn(ExperimentalFoundationApi::class)
+@Preview(
+    uiMode = Configuration.UI_MODE_NIGHT_NO,
+    device = Devices.AUTOMOTIVE_1024p,
+    widthDp = 720,
+    heightDp = 360
+)
+@Preview(
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+    device = Devices.AUTOMOTIVE_1024p,
+    widthDp = 720,
+    heightDp = 360
+)
+@Composable
+private fun WhatsNewLandscapePreview() {
+    OpenEdXTheme {
+        WhatsNewScreenLandscape(
+            whatsNewItem = whatsNewItemPreview,
+            onCloseClick = {},
+            pagerState = rememberPagerState { 4 }
+        )
+    }
+}
diff --git a/whatsnew/src/main/java/org/openedx/whatsnew/presentation/whatsnew/WhatsNewViewModel.kt b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/whatsnew/WhatsNewViewModel.kt
new file mode 100644
index 000000000..c27ead37c
--- /dev/null
+++ b/whatsnew/src/main/java/org/openedx/whatsnew/presentation/whatsnew/WhatsNewViewModel.kt
@@ -0,0 +1,25 @@
+package org.openedx.whatsnew.presentation.whatsnew
+
+import androidx.compose.runtime.State
+import androidx.compose.runtime.mutableStateOf
+import org.openedx.core.BaseViewModel
+import org.openedx.whatsnew.WhatsNewManager
+import org.openedx.whatsnew.domain.model.WhatsNewItem
+
+class WhatsNewViewModel(
+    val courseId: String?,
+    private val whatsNewManager: WhatsNewManager
+) : BaseViewModel() {
+
+    private val _whatsNewItem = mutableStateOf<WhatsNewItem?>(null)
+    val whatsNewItem: State<WhatsNewItem?>
+        get() = _whatsNewItem
+
+    init {
+        getNewestData()
+    }
+
+    private fun getNewestData() {
+        _whatsNewItem.value = whatsNewManager.getNewestData()
+    }
+}
diff --git a/whatsnew/src/main/res/drawable-nodpi/screen_1.png b/whatsnew/src/main/res/drawable-nodpi/screen_1.png
new file mode 100644
index 000000000..1853bf8ab
Binary files /dev/null and b/whatsnew/src/main/res/drawable-nodpi/screen_1.png differ
diff --git a/whatsnew/src/main/res/drawable-nodpi/screen_2.png b/whatsnew/src/main/res/drawable-nodpi/screen_2.png
new file mode 100644
index 000000000..36b711417
Binary files /dev/null and b/whatsnew/src/main/res/drawable-nodpi/screen_2.png differ
diff --git a/whatsnew/src/main/res/drawable-nodpi/screen_3.jpg b/whatsnew/src/main/res/drawable-nodpi/screen_3.jpg
new file mode 100644
index 000000000..1165ae596
Binary files /dev/null and b/whatsnew/src/main/res/drawable-nodpi/screen_3.jpg differ
diff --git a/whatsnew/src/main/res/raw/whats_new.json b/whatsnew/src/main/res/raw/whats_new.json
new file mode 100644
index 000000000..4bf14e6e1
--- /dev/null
+++ b/whatsnew/src/main/res/raw/whats_new.json
@@ -0,0 +1,37 @@
+[
+  {
+    "version": "1.0",
+    "messages": [
+      {
+        "image": "screen_1",
+        "title": "Improved language support",
+        "message": "We have added more translations throughout the app so you can learn on edX your way!"
+      },
+      {
+        "image": "screen_2",
+        "title": "Download videos offline",
+        "message": "Easily download videos without having an internet connection, so you can keep learning when there isn’t a network around"
+      },
+      {
+        "image": "screen_2",
+        "title": "Reduced Network Usage",
+        "message": "Now you can download your content faster to get right into your next lesson!"
+      },
+      {
+        "image": "screen_3",
+        "title": "Learning Site Switching",
+        "message": "Switch more easily between multiple learning sites. Find the new options within account settings and easily manage your accounts"
+      }
+    ]
+  },
+  {
+    "version": "0.9",
+    "messages": [
+      {
+        "image": "screen_1",
+        "title": "Sync to calendar",
+        "message": "Never miss a deadline again—sync course dates to your phone's calendar to receive reminders!"
+      }
+    ]
+  }
+]
diff --git a/whatsnew/src/main/res/values-uk/strings.xml b/whatsnew/src/main/res/values-uk/strings.xml
new file mode 100644
index 000000000..d1ad95a41
--- /dev/null
+++ b/whatsnew/src/main/res/values-uk/strings.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="whats_new_title">Що нового</string>
+    <string name="whats_new_navigation_previous">Попередній</string>
+    <string name="whats_new_navigation_next">Наступний</string>
+    <string name="whats_new_navigation_done">Закрити</string>
+</resources>
\ No newline at end of file
diff --git a/whatsnew/src/main/res/values/strings.xml b/whatsnew/src/main/res/values/strings.xml
new file mode 100644
index 000000000..135605767
--- /dev/null
+++ b/whatsnew/src/main/res/values/strings.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="whats_new_title">What\'s New</string>
+    <string name="whats_new_navigation_previous">Previous</string>
+    <string name="whats_new_navigation_next">Next</string>
+    <string name="whats_new_navigation_done">Done</string>
+</resources>
\ No newline at end of file
diff --git a/whatsnew/src/test/java/org/openedx/whatsnew/WhatsNewViewModelTest.kt b/whatsnew/src/test/java/org/openedx/whatsnew/WhatsNewViewModelTest.kt
new file mode 100644
index 000000000..e187ffaa8
--- /dev/null
+++ b/whatsnew/src/test/java/org/openedx/whatsnew/WhatsNewViewModelTest.kt
@@ -0,0 +1,29 @@
+package org.openedx.whatsnew
+
+import io.mockk.every
+import io.mockk.mockk
+import io.mockk.verify
+import kotlinx.coroutines.test.runTest
+import org.junit.Test
+import org.openedx.whatsnew.domain.model.WhatsNewItem
+import org.openedx.whatsnew.presentation.whatsnew.WhatsNewViewModel
+
+class WhatsNewViewModelTest {
+
+    private val whatsNewManager = mockk<WhatsNewManager>()
+
+    private val whatsNewItem = WhatsNewItem(
+        version = "1.0.0",
+        messages = emptyList()
+    )
+
+    @Test
+    fun `getNewestData success`() = runTest {
+        every { whatsNewManager.getNewestData() } returns whatsNewItem
+
+        val viewModel = WhatsNewViewModel("", whatsNewManager)
+
+        verify(exactly = 1) { whatsNewManager.getNewestData() }
+        assert(viewModel.whatsNewItem.value == whatsNewItem)
+    }
+}
\ No newline at end of file