diff --git a/Team 220/frontend/.idea/gradle.xml b/Team 220/frontend/.idea/gradle.xml
index 32522c1e7..0897082f7 100644
--- a/Team 220/frontend/.idea/gradle.xml	
+++ b/Team 220/frontend/.idea/gradle.xml	
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
diff --git a/Team 220/frontend/.idea/misc.xml b/Team 220/frontend/.idea/misc.xml
index 0ad17cbd3..8978d23db 100644
--- a/Team 220/frontend/.idea/misc.xml	
+++ b/Team 220/frontend/.idea/misc.xml	
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/SideBarDrawer.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/SideBarDrawer.kt
index 82a07dbaa..40db2d2e8 100644
--- a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/SideBarDrawer.kt	
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/SideBarDrawer.kt	
@@ -26,7 +26,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.example.sitsocialapp.SideBarMenuItem
+import com.example.sitsocialhacknation.SideBarMenuItem
 
 @Composable
 fun SideBarDrawer(){
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/ApiClient.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/ApiClient.kt
new file mode 100644
index 000000000..66eb96b80
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/ApiClient.kt	
@@ -0,0 +1,31 @@
+package com.example.sitsocialapp.classes
+
+import retrofit2.Retrofit
+import retrofit2.converter.gson.GsonConverterFactory
+
+
+
+
+
+/**
+ * Retrofit instance class
+ */
+class ApiClient {
+    private lateinit var apiService: ApiService
+
+    fun getApiService(): ApiService {
+
+        // Initialize ApiService if not initialized yet
+        if (!::apiService.isInitialized) {
+            val retrofit = Retrofit.Builder()
+                .baseUrl(Constants.BASE_URL)
+                .addConverterFactory(GsonConverterFactory.create())
+                .build()
+
+            apiService = retrofit.create(ApiService::class.java)
+        }
+
+        return apiService
+    }
+
+}
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/ApiService.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/ApiService.kt
new file mode 100644
index 000000000..f76ad6364
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/ApiService.kt	
@@ -0,0 +1,18 @@
+package com.example.sitsocialapp.classes
+
+import retrofit2.Call
+import retrofit2.http.Body
+import retrofit2.http.FormUrlEncoded
+import retrofit2.http.POST
+
+
+/**
+ * Interface for defining REST request functions
+ */
+interface ApiService {
+
+    @POST(Constants.LOGIN_URL)
+    @FormUrlEncoded
+    fun login(@Body request: LoginRequest): Call<LoginResponse>
+
+}
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/Constants.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/Constants.kt
new file mode 100644
index 000000000..af9775faf
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/Constants.kt	
@@ -0,0 +1,11 @@
+package com.example.sitsocialapp.classes
+
+
+object Constants {
+
+    // Endpoints
+    const val BASE_URL = "https://baseurl.com/"
+    const val LOGIN_URL = "auth/login"
+    const val POSTS_URL = "posts"
+
+}
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginActivity.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginActivity.kt
new file mode 100644
index 000000000..d5ae63b4e
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginActivity.kt	
@@ -0,0 +1,46 @@
+package com.example.sitsocialapp.classes
+
+import android.os.Bundle
+
+import androidx.activity.compose.setContent
+import androidx.appcompat.app.AppCompatActivity
+import com.example.sitsocialapp.R
+import com.example.sitsocialapp.screens.LoginScreen
+import retrofit2.Call
+import retrofit2.Callback
+import retrofit2.Response
+
+
+class LoginActivity : AppCompatActivity() {
+    private lateinit var sessionManager: SessionManager
+    private lateinit var apiClient: ApiClient
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+//        setContent(content = {LoginScreen()})
+
+        apiClient = ApiClient()
+        sessionManager = SessionManager(this)
+
+        apiClient.getApiService().login(LoginRequest(email = "s@sample.com", password = "mypassword"))
+            .enqueue(object : Callback<LoginResponse> {
+                override fun onFailure(call: Call<LoginResponse>, t: Throwable) {
+                    // Error logging in
+                }
+
+                override fun onResponse(call: Call<LoginResponse>, response: Response<LoginResponse>) {
+                    val loginResponse = response.body()
+
+                    if (loginResponse?.statusCode == 200 && loginResponse.user != null) {
+                        sessionManager.saveAuthToken(loginResponse.authToken)
+                    } else {
+                        // Error logging in
+                    }
+                }
+            })
+
+    }
+}
+
+
+
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginRequest.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginRequest.kt
new file mode 100644
index 000000000..5f6bd6559
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginRequest.kt	
@@ -0,0 +1,11 @@
+package com.example.sitsocialapp.classes
+
+import com.google.gson.annotations.SerializedName
+
+data class LoginRequest (
+    @SerializedName("email")
+    var email: String,
+
+    @SerializedName("password")
+    var password: String
+)
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginResponse.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginResponse.kt
new file mode 100644
index 000000000..0c19ebe41
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/LoginResponse.kt	
@@ -0,0 +1,15 @@
+package com.example.sitsocialapp.classes
+
+import com.google.gson.annotations.SerializedName
+
+
+data class LoginResponse (
+    @SerializedName("status_code")
+    var statusCode: Int,
+
+    @SerializedName("auth_token")
+    var authToken: String,
+
+    @SerializedName("user")
+    var user: User
+)
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/SessionManager.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/SessionManager.kt
new file mode 100644
index 000000000..e219756e8
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/SessionManager.kt	
@@ -0,0 +1,32 @@
+package com.example.sitsocialapp.classes
+
+import android.content.Context
+import android.content.SharedPreferences
+import com.example.sitsocialapp.R
+
+/**
+ * Session manager to save and fetch data from SharedPreferences
+ */
+class SessionManager (context: Context) {
+    private var prefs: SharedPreferences = context.getSharedPreferences(context.getString(R.string.app_name), Context.MODE_PRIVATE)
+
+    companion object {
+        const val USER_TOKEN = "user_token"
+    }
+
+    /**
+     * Function to save auth token
+     */
+    fun saveAuthToken(token: String) {
+        val editor = prefs.edit()
+        editor.putString(USER_TOKEN, token)
+        editor.apply()
+    }
+
+    /**
+     * Function to fetch auth token
+     */
+    fun fetchAuthToken(): String? {
+        return prefs.getString(USER_TOKEN, null)
+    }
+}
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/User.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/User.kt
new file mode 100644
index 000000000..f635c109d
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/classes/User.kt	
@@ -0,0 +1,14 @@
+package com.example.sitsocialapp.classes
+
+import com.google.gson.annotations.SerializedName
+
+data class User(
+    @SerializedName("name")
+    var name: String,
+
+    @SerializedName("username")
+    var username: String,
+
+    @SerializedName("email")
+    var email: String
+)
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/CreatePostScreen.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/CreatePostScreen.kt
new file mode 100644
index 000000000..78eb8e0ad
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/CreatePostScreen.kt	
@@ -0,0 +1,22 @@
+package com.example.sitsocialhacknation.screens
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun CreatePostScreen(){
+    Column (horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+        modifier = Modifier.fillMaxSize().background(Color.Red)){
+        Text(text = "Create Post Screen",
+            color = Color.White,
+            fontSize = 24.sp)
+    }
+}
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/NotificationScreen.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/NotificationScreen.kt
new file mode 100644
index 000000000..15be5d874
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/NotificationScreen.kt	
@@ -0,0 +1,26 @@
+package com.example.sitsocialhacknation.screens
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
+import com.example.sitsocialhacknation.ui.theme.BackgroundColor
+
+@Preview
+@Composable
+fun NotificationScreen(){
+    Column (horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+        modifier = Modifier.fillMaxSize()
+            .background(BackgroundColor)){
+        TopBar(screenName = "Notifications")
+        Notifications()
+    }
+}
\ No newline at end of file
diff --git a/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/ReusableComposable.kt b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/ReusableComposable.kt
new file mode 100644
index 000000000..a6d6fffe4
--- /dev/null
+++ b/Team 220/frontend/app/src/main/java/com/example/sitsocialhacknation/screens/ReusableComposable.kt	
@@ -0,0 +1,540 @@
+package com.example.sitsocialhacknation.screens
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Arrangement
+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.requiredWidth
+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.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.DateRange
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.FavoriteBorder
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material.icons.rounded.Send
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Divider
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconToggleButton
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.OutlinedTextFieldDefaults
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.rememberDrawerState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+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.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.sitsocialhacknation.R
+import com.example.sitsocialhacknation.SideBarDrawer
+import com.example.sitsocialhacknation.functions.getEventNotificationList
+import com.example.sitsocialhacknation.functions.getFollowedCommunitiesList
+import com.example.sitsocialhacknation.functions.getImageList
+import com.example.sitsocialhacknation.functions.getPostList
+import com.example.sitsocialhacknation.functions.getUserNotificationList
+import com.example.sitsocialhacknation.ui.theme.AccentColor
+import com.example.sitsocialhacknation.ui.theme.fontAccentFamily
+import com.example.sitsocialhacknation.ui.theme.fontLogoFamily
+import com.example.sitsocialhacknation.ui.theme.fontPrimaryFamily
+import com.example.sitsocialhacknation.ui.theme.gradient
+
+
+@Composable
+fun LoginButton(text: String, event: () -> Unit){
+    Button(onClick = { event() },
+        colors = ButtonDefaults.buttonColors(containerColor = AccentColor),
+        modifier = Modifier.size(width = 400.dp, height = 50.dp)
+    ) {
+        Text(text = text,
+            fontSize = 24.sp,
+            fontFamily = fontAccentFamily,
+            color = Color.White
+        )
+    }
+}
+@Composable
+fun TextInput(label: String, placeholder: String){
+    val state = remember{ mutableStateOf("") }
+    TextField(value = state.value,
+        onValueChange = {
+            state.value=it
+        },
+        label = { Text(text = label) },
+        placeholder = { Text(text = placeholder) }
+    )
+}
+
+@Composable
+fun LogoText(size: Int, modifier: Modifier){
+    Text(text = "SIT SOCIAL",
+        color = Color.White,
+        fontFamily = fontLogoFamily,
+        fontSize = size.sp,
+        modifier = modifier
+    )
+}
+
+@Composable
+fun TopBar(screenName: String){
+    val state = remember { mutableStateOf("") }
+    Column(modifier = Modifier
+//        .fillMaxSize()
+        .padding(10.dp),
+//        horizontalAlignment = Alignment.Start,
+        verticalArrangement = Arrangement.SpaceBetween
+    )
+    {
+        Row(
+            horizontalArrangement = Arrangement.Start,
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.height(IntrinsicSize.Min)
+        ) {
+            LogoText(size = 23, modifier = Modifier)
+            Spacer(modifier = Modifier.width(6.dp))
+            Divider(
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .width(1.dp),
+                color = Color.White
+            )
+            Spacer(modifier = Modifier.width(6.dp))
+            Text(
+                text = screenName,
+                color = Color.White,
+                fontFamily = fontPrimaryFamily,
+                fontSize = 20.sp
+            )
+        }
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(IntrinsicSize.Min)
+                .padding(top = 10.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        )
+        {
+//            val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
+            //Menu Button Icon
+            IconButton(
+                onClick = {  },
+                modifier = Modifier.size(40.dp)
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.Menu,
+                    contentDescription = "",
+                    modifier = Modifier.fillMaxSize(),
+                    tint = Color.White
+                )
+            }
+            //Search Field
+            OutlinedTextField(
+                value = state.value,
+                onValueChange = {
+                    state.value = it
+                },
+                placeholder = { Text(text = "Search Communities") },
+                shape = RoundedCornerShape(50),
+//                modifier = Modifier.width(240.dp),
+                trailingIcon = {
+                    //Search button
+                    IconButton(
+                        onClick = { /*TODO Search Operation*/ },
+                        modifier = Modifier.size(40.dp)
+                    ) {
+                        Icon(
+                            imageVector = Icons.Filled.Search,
+                            contentDescription = "",
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .padding(4.dp),
+                            tint = Color.White
+                        )
+                    }
+                },
+                colors = OutlinedTextFieldDefaults.colors(
+                    focusedTextColor = Color.White,
+                    focusedBorderColor = Color.White.copy(alpha = 0.8f),
+                    unfocusedBorderColor = Color.White.copy(alpha = 0.6f),
+                    unfocusedPlaceholderColor = Color.White.copy(alpha = 0.6f)
+                )
+            )
+            //Event Button Icon
+            IconButton(
+                onClick = { /*TODO Open Events page*/ },
+                modifier = Modifier.size(40.dp)
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.DateRange,
+                    contentDescription = "",
+                    modifier = Modifier.fillMaxSize(),
+                    tint = Color.White
+                )
+            }
+        }
+    }
+}
+
+
+@Composable
+fun CircleStoryFrame(img: Int){
+    Image(painter = painterResource(id = img),
+        contentScale = ContentScale.Crop,
+        modifier = Modifier
+            .size(70.dp)
+            .clip(CircleShape)
+            .border(3.dp, gradient, CircleShape),
+        contentDescription = "Circle Story")
+}
+
+
+@Composable
+fun Story(){
+    LazyRow(content = {
+        items(getImageList()){item ->
+            CircleStoryFrame(img = item)
+        }
+    },
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        contentPadding = PaddingValues(10.dp)
+    )
+}
+
+@Composable
+fun Feed(){
+    LazyColumn(content = {
+        items(getPostList()){item ->
+            Post(img = item.img, name = item.name, desc = item.desc, content = item.content, likeCount = item.likeCount, commentCount = item.commentCount)
+        }
+    },
+        horizontalAlignment = Alignment.CenterHorizontally)
+}
+//@Preview
+@Composable
+fun Post(img: Int, name: String, desc: String, content: String, likeCount: Int, commentCount: Int){
+    Column (verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .padding(10.dp, 5.dp, 10.dp, 5.dp)
+    ){
+        //User Info and More
+        Row (modifier = Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ){
+            UserInfo(img = img, name = name, desc = desc)
+            IconButton(
+                onClick = { /*TODO Draw menu*/ }
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.MoreVert,
+                    contentDescription = "more",
+                    tint = Color.White.copy(alpha = 0.8f)
+                )
+            }
+        }
+        //post content
+        Text(text = content,
+            fontSize = 15.sp,
+            fontFamily = fontPrimaryFamily,
+            color = Color.White,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(5.dp)
+        )
+        //Like, Comment, and Share
+        Row (modifier = Modifier
+            .fillMaxWidth()
+            .padding(5.dp),
+            horizontalArrangement = Arrangement.spacedBy(24.dp),
+            verticalAlignment = Alignment.Top){
+            //Like
+            Column (
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ){
+                var isLike by remember{ mutableStateOf(false) }
+                var noOfLikes = remember { mutableIntStateOf(likeCount) }
+                IconToggleButton(checked = isLike,
+                    onCheckedChange = {
+                        isLike = !isLike
+                        if(isLike){
+                            noOfLikes.intValue = noOfLikes.intValue + 1
+                        }
+                        else{
+                            noOfLikes.intValue = noOfLikes.intValue - 1
+                        }
+                    },
+                    modifier = Modifier.size(25.dp)
+                ) {
+                    Icon(
+                        imageVector = if(!isLike){Icons.Filled.FavoriteBorder}else{Icons.Filled.Favorite},
+                        contentDescription = "like",
+                        tint = if(!isLike){Color.White.copy(alpha = 0.8f)}else{Color.Red},
+                        modifier = Modifier.fillMaxSize()
+                    )
+                }
+                Text(text = noOfLikes.value.toString(),
+                    color = Color.White,
+                )
+            }
+            //Comment
+            Column (
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ){
+                var noOfComments = remember { mutableIntStateOf(commentCount) }
+                IconButton(
+                    onClick = { /*TODO Open Events page*/ },
+                    modifier = Modifier.size(25.dp)
+                ) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.baseline_insert_comment_24),
+                        contentDescription = "Comment",
+                        modifier = Modifier.fillMaxSize(),
+                        tint = Color.White.copy(alpha = 0.8f)
+                    )
+                }
+                Text(text = noOfComments.intValue.toString(),
+                    color = Color.White
+                    )
+            }
+            //Share
+            IconButton(
+                onClick = { /*TODO Open Events page*/ },
+                modifier = Modifier.size(25.dp)
+            ) {
+                Icon(
+                   imageVector = Icons.Rounded.Send,
+                    contentDescription = "Send",
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .rotate(325f),
+                    tint = Color.White.copy(alpha = 0.8f)
+                )
+            }
+        }
+        Divider(
+            modifier = Modifier
+                .fillMaxWidth()
+                .width(2.dp)
+                .padding(top = 6.dp, bottom = 6.dp),
+            color = Color.LightGray.copy(alpha = 0.4f)
+        )
+    }
+}
+
+//@Preview
+@Composable
+fun UserInfo(img: Int, name: String, desc: String) {
+    Row (verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(6.dp)){
+        Image(painter = painterResource(id = img),
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .size(30.dp)
+                .clip(CircleShape)
+            ,
+            contentDescription = "Circle Profile picture")
+        Column {
+            Text(text = name, fontSize = 14.sp, fontFamily = fontPrimaryFamily, color = Color.White)
+            Text(text = desc, fontSize = 11.sp, fontFamily = fontPrimaryFamily, color = Color.White.copy(alpha = 0.6f))
+        }
+    }
+}
+//@Preview
+@Composable
+fun FollowedCommunitiesFrame(img: Int, name: String, content: String){
+    Box(modifier = Modifier
+        .widthIn(200.dp, 300.dp)
+        .height(130.dp)
+        .border(0.85.dp, Color.LightGray.copy(alpha = 0.5f), RoundedCornerShape(20.dp))
+        .clip(shape = RoundedCornerShape(20.dp))
+        .padding(10.dp)
+    ){
+        Column (verticalArrangement = Arrangement.spacedBy(6.dp)
+        ){
+            Row (
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp)
+            ){
+                Image(painter = painterResource(id = img),
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier
+                        .size(30.dp)
+                        .clip(CircleShape)
+                    ,
+                    contentDescription = "Circle Profile picture")
+                Text(text = name, fontSize = 20.sp, fontFamily = fontPrimaryFamily, color = Color.White)
+            }
+            Text(text = content, fontSize = 14.sp, fontFamily = fontPrimaryFamily, color = Color.White,
+                textAlign = TextAlign.Justify, overflow = TextOverflow.Ellipsis, maxLines = 3)
+        }
+    }
+}
+
+@Composable
+fun FollowedCommunities(){
+    LazyRow(content = {
+        items(getFollowedCommunitiesList()){ item ->
+            FollowedCommunitiesFrame(item.img,item.name,item.content)
+        }
+    },
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        contentPadding = PaddingValues(10.dp)
+    )
+}
+
+
+@Composable
+fun NewCommunitiesFrame(img: Int, name: String, content: String, buttonText: String, buttonOperation: () -> Unit){
+    Box(modifier = Modifier
+        .fillMaxWidth()
+        .height(130.dp)
+        .border(0.85.dp, Color.LightGray.copy(alpha = 0.5f), RoundedCornerShape(20.dp))
+        .clip(shape = RoundedCornerShape(20.dp))
+        .padding(10.dp),
+        contentAlignment = Alignment.Center
+    ){
+        Row (verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+            modifier = Modifier.fillMaxSize()){
+            Image(painter = painterResource(id = img),
+                contentDescription = "Circle Profile Picture",
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .size(70.dp)
+                    .clip(CircleShape))
+            Column (horizontalAlignment = Alignment.Start,
+                verticalArrangement = Arrangement.SpaceEvenly,
+                modifier = Modifier.fillMaxSize()){
+                Row (horizontalArrangement = Arrangement.SpaceBetween,
+                    verticalAlignment = Alignment.CenterVertically,
+                    modifier = Modifier.fillMaxWidth()){
+                    Text(text = name, fontSize = 20.sp, fontFamily = fontPrimaryFamily, color = Color.White, maxLines = 1, overflow = TextOverflow.Ellipsis, modifier = Modifier.weight(1f))
+                    Button(onClick = { buttonOperation() },
+                        colors = ButtonDefaults.buttonColors(containerColor = Color.Blue),
+//                        modifier = Modifier.requiredWidth(80.dp)
+                    ) {
+                        Text(text = buttonText,
+                            fontSize = 16.sp,
+                            fontFamily = fontAccentFamily,
+                            color = Color.White
+                        )
+                    }
+                }
+                Text(text = content , fontSize = 14.sp, fontFamily = fontPrimaryFamily, color = Color.White,
+                textAlign = TextAlign.Justify, overflow = TextOverflow.Ellipsis, maxLines = 3)
+            }
+        }
+    }
+}
+
+@Composable
+fun NewCommunities(){
+    LazyColumn(content = {
+        items(getFollowedCommunitiesList()){ item ->
+            NewCommunitiesFrame(item.img,item.name,item.content, item.buttonText){
+                /*TODO: Join/ follow operation*/
+                println("Joined ${item.name}")
+            }
+        }
+    },
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+        contentPadding = PaddingValues(10.dp)
+    )
+}
+
+@Composable
+fun EventNotificationFrame(img: Int, community_name:String, event_name:String, event_desc:String, date:String) {
+
+    Column (horizontalAlignment = Alignment.Start,
+        verticalArrangement = Arrangement.spacedBy(3.dp),
+        modifier = Modifier.fillMaxWidth()){
+//        Divider(modifier = Modifier
+//            .fillMaxWidth()
+//            .padding(top = 6.dp, bottom = 6.dp),
+//            thickness = 1.dp,
+//            color = Color.White.copy(alpha = 0.4f)
+//        )
+        Spacer(modifier = Modifier.width(6.dp))
+        Row (
+            horizontalArrangement = Arrangement.Start,
+            verticalAlignment = Alignment.CenterVertically
+        ){
+            Image(painter = painterResource(id = img),
+                contentDescription = "Circle Profile Picture",
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .size(20.dp)
+                    .clip(CircleShape))
+            Spacer(modifier = Modifier.width(8.dp))
+            Text(text = "/"+community_name,color = Color.White, fontSize = 10.sp)
+        }
+        Text(text = event_name, color = Color.White, fontSize = 13.sp, fontWeight = FontWeight.Bold)
+        Text(text = event_desc, color = Color.White, fontSize = 10.sp)
+        Text(text = "Start Date: "+date,color = Color.White, fontSize = 10.sp)
+    }
+}
+//@Preview
+@Composable
+fun Notifications(){
+    LazyColumn(content = {
+        items(getEventNotificationList()){ item ->
+            EventNotificationFrame(
+                img = item.img,
+                community_name = item.community_name,
+                event_name = item.event_name,
+                event_desc = item.event_desc,
+                date = item.date
+            )
+        }
+        items(getUserNotificationList()){ item ->
+            NewCommunitiesFrame(img = item.img, name = item.name, content = item.content, buttonText = item.buttonText){
+                /*TODO: Join/ follow operation*/
+                println("Joined ${item.name}")
+            }
+        }
+    },
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+        contentPadding = PaddingValues(10.dp) ,
+        modifier = Modifier.padding(start = 10.dp, end = 10.dp))
+}
\ No newline at end of file