diff --git a/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt
index 93cc46b..25da161 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/bills/ui/view/BillsScreen.kt
@@ -8,10 +8,10 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -23,20 +23,22 @@ 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.unit.dp
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.hilt.navigation.compose.hiltViewModel
+import com.ouday.cryptowalletsample.R
 import com.ouday.cryptowalletsample.bills.data.model.Bill
 import com.ouday.cryptowalletsample.bills.data.model.History
 import com.ouday.cryptowalletsample.bills.ui.viewmodel.BillViewModel
 import com.ouday.cryptowalletsample.common.FlowState
 import com.ouday.cryptowalletsample.common.HandleFlowState
 import com.ouday.cryptowalletsample.home.components.BillOptionItem
+import com.ouday.cryptowalletsample.ui.theme.Colors
+import com.ouday.cryptowalletsample.ui.theme.MaterialCornerRadius
+import com.ouday.cryptowalletsample.ui.theme.Size
 import com.ouday.cryptowalletsample.ui.theme.Space
-import com.ouday.cryptowalletsample.ui.theme.craneColors
-import com.ouday.cryptowalletsample.ui.theme.craneTypography
+import com.ouday.cryptowalletsample.ui.theme.Typography
 import com.ouday.cryptowalletsample.ui.theme.success
-import dagger.hilt.android.AndroidEntryPoint
 
 @Composable
 fun BillsScreen(modifier: Modifier = Modifier, viewModel: BillViewModel = hiltViewModel()) {
@@ -68,12 +70,10 @@ fun BillsScreen(modifier: Modifier = Modifier, viewModel: BillViewModel = hiltVi
                     LazyColumn {
                         items(history.size) { index ->
                             BillDetails(history[index])
-
                         }
                     }
                 }
             }
-
         },
         onRetry = {
             viewModel.triggerFetchBills()
@@ -87,34 +87,49 @@ fun BillDetails(history: History, modifier: Modifier = Modifier) {
         modifier = modifier
             .fillMaxWidth()
             .padding(horizontal = Space.spaceSmall, vertical = Space.spaceSmall)
-            .clip(RoundedCornerShape(14.dp)) // First clip, then apply background
-            .background(craneColors.primaryVariant)
-            .padding(16.dp), // Padding goes after background
+            .clip(RoundedCornerShape(MaterialCornerRadius.radiusMedium))
+            .background(Colors.primaryVariant)
+            .padding(Space.spaceMedium),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Column(
             modifier = Modifier.weight(1f)
         ) {
             Text(
-                text = "Date: ${history.date}",
-                style = craneTypography.body1
+                text = stringResource(
+                    R.string.bill_date,
+                    history.date
+                ),
+                style = Typography.body1,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                color = Colors.onSurface 
             )
             Text(
-                text = "Amount: \$${history.amount}",
-                style = craneTypography.body1
+                text = stringResource(
+                    R.string.bill_amount,
+                    history.amount
+                ),
+                style = Typography.body1,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+                color = Colors.onSurface 
             )
         }
         Box(
             modifier = Modifier
-                .size(24.dp)
+                .width(Size.size3XLarge)
+                .size(Space.spaceLarge)
                 .clip(CircleShape)
-                .background(if (history.paid) craneColors.success else craneColors.error),
+                .background(if (history.paid) Colors.success else Colors.error),
             contentAlignment = Alignment.Center
         ) {
             Text(
-                text = if (history.paid) "✓" else "✕",
-                color = craneColors.background,
-                fontSize = 12.sp
+                text = if (history.paid) stringResource(R.string.paid) else stringResource(R.string.not_paid),
+                color = Colors.onSurface,
+                style = Typography.caption,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis
             )
         }
     }
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt b/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt
index fb29dc4..5b345cc 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/common/FlowStateUtils.kt
@@ -20,7 +20,6 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Error
 import androidx.compose.material3.Button
 import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -32,7 +31,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import com.ouday.cryptowalletsample.ui.theme.craneColors
+import com.ouday.cryptowalletsample.ui.theme.Colors
 
 @Composable
 fun <T> HandleFlowState(
@@ -118,14 +117,14 @@ fun ErrorContent(errorMessage: String, onRetry: () -> Unit) {
         verticalArrangement = Arrangement.Center
     ) {
         // Error icon or image (optional)
-        Icon(Icons.Filled.Error, contentDescription = "Error", tint = craneColors.error)
+        Icon(Icons.Filled.Error, contentDescription = "Error", tint = Colors.error)
 
         Spacer(modifier = Modifier.height(16.dp))
 
         // Error message text
         Text(
             text = errorMessage,
-            color = craneColors.error,
+            color = Colors.error,
             style = typography.body1,
             textAlign = TextAlign.Center
         )
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt
index b0bfdd4..a144818 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/creditcards/ui/view/CreditCardsScreen.kt
@@ -1,33 +1,22 @@
 package com.ouday.cryptowalletsample.creditcards.ui.view
 
-import CreditCardComposable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.HorizontalPagerIndicator
-import com.google.accompanist.pager.rememberPagerState
 import com.ouday.cryptowalletsample.common.FlowState
 import com.ouday.cryptowalletsample.common.HandleFlowState
 import com.ouday.cryptowalletsample.creditcards.data.model.CreditCardInfo
 import com.ouday.cryptowalletsample.creditcards.ui.viewmodel.CreditCardViewModel
-import com.ouday.cryptowalletsample.home.components.LoanCardComposable
-import com.ouday.cryptowalletsample.home.ui.view.CreditCardsPager
-import com.ouday.cryptowalletsample.ui.theme.Size
+import com.ouday.cryptowalletsample.home.components.CreditCardComposable
 import com.ouday.cryptowalletsample.ui.theme.Space
-import com.ouday.cryptowalletsample.ui.theme.craneColors
 
 @Composable
 fun CreditCardsScreen(modifier: Modifier = Modifier, viewModel: CreditCardViewModel = hiltViewModel()) {
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt
index 2cd36a3..bd45f9b 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BillOptionsComposable.kt
@@ -18,7 +18,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextAlign
@@ -29,8 +28,8 @@ import com.ouday.cryptowalletsample.R
 import com.ouday.cryptowalletsample.bills.data.model.Bill
 import com.ouday.cryptowalletsample.ui.theme.Size
 import com.ouday.cryptowalletsample.ui.theme.Space
-import com.ouday.cryptowalletsample.ui.theme.craneColors
-import com.ouday.cryptowalletsample.ui.theme.craneTypography
+import com.ouday.cryptowalletsample.ui.theme.Colors
+import com.ouday.cryptowalletsample.ui.theme.Typography
 import coil.decode.SvgDecoder
 import coil.imageLoader
 import coil.request.ImageRequest
@@ -65,7 +64,7 @@ fun BillOptionItem(
             modifier = Modifier
                 .clip(RoundedCornerShape(Size.sizeSmall))
                 .fillMaxWidth()
-                .background(craneColors.primary.copy(alpha = if (isSelected) 0.8f else 0.2f))
+                .background(Colors.primary.copy(alpha = if (isSelected) 0.8f else 0.2f))
                 .wrapContentHeight()
         ) {
             IconButton(onClick = { onBillClicked(bill) }) {
@@ -76,7 +75,7 @@ fun BillOptionItem(
                         modifier = Modifier
                             .size(Size.sizeLarge)
                             .padding(Space.space2XSmall),
-                        tint = if (isSelected) craneColors.background else craneColors.onSurface
+                        tint = if (isSelected) Colors.background else Colors.onSurface
                     )
                 }
             }
@@ -87,7 +86,7 @@ fun BillOptionItem(
                 .fillMaxWidth()
                 .fillMaxHeight(),
             textAlign = TextAlign.Center,
-            style = craneTypography.caption.copy(fontSize = 8.sp)
+            style = Typography.caption.copy(fontSize = 8.sp)
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt
index c89b210..f6b7a62 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/BottomNavigationBar.kt
@@ -23,7 +23,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.ouday.cryptowalletsample.ui.theme.craneColors
+import com.ouday.cryptowalletsample.ui.theme.Colors
 
 @Composable
 fun BottomNavigationBar(
@@ -36,7 +36,7 @@ fun BottomNavigationBar(
             modifier = Modifier
                 .fillMaxWidth()
                 .height(50.dp)
-                .background(craneColors.surface, RoundedCornerShape(30.dp)),
+                .background(Colors.surface, RoundedCornerShape(30.dp)),
             containerColor = Color.Transparent
         ) {
             var selectedItem by remember { mutableStateOf<BottomNavItem>(BottomNavItem.Home) }
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt
index 9fe3d73..8f505e3 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/CreditCardComposable.kt
@@ -1,30 +1,35 @@
+package com.ouday.cryptowalletsample.home.components
+
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.constraintlayout.compose.ConstraintLayout
-import androidx.hilt.navigation.compose.hiltViewModel
+import com.ouday.cryptowalletsample.R
 import com.ouday.cryptowalletsample.creditcards.data.model.CreditCardInfo
-import com.ouday.cryptowalletsample.creditcards.ui.viewmodel.CreditCardViewModel
-import com.ouday.cryptowalletsample.ui.theme.*
+import com.ouday.cryptowalletsample.ui.theme.Colors
+import com.ouday.cryptowalletsample.ui.theme.MaterialCornerRadius
+import com.ouday.cryptowalletsample.ui.theme.Size
+import com.ouday.cryptowalletsample.ui.theme.Space
+import com.ouday.cryptowalletsample.ui.theme.Typography
 
 @Composable
 fun CreditCardComposable(cardInfo: CreditCardInfo, modifier: Modifier = Modifier) {
     Box(
         modifier = modifier
-            .height(200.dp) // Adjust the height as needed
-            .clip(RoundedCornerShape(16.dp)) // Adjust corner size as needed
-            .background(Color.Black) // Use your theme's color
-            .padding(16.dp) // Use your theme's padding
+            .height(Size.sizeXMax) // Using Size from CryptoWalletSampleTheme
+            .clip(RoundedCornerShape(MaterialCornerRadius.radiusMedium)) // Using MaterialCornerRadius from CryptoWalletSampleTheme
+            .background(Colors.surface) // Using Colors from CryptoWalletSampleTheme
+            .padding(Space.spaceMedium) // Using Space from CryptoWalletSampleTheme
     ) {
         ConstraintLayout(
             modifier = Modifier.fillMaxSize()
@@ -33,67 +38,67 @@ fun CreditCardComposable(cardInfo: CreditCardInfo, modifier: Modifier = Modifier
 
             Text(
                 text = cardInfo.cardType,
-                color = Color.White,
-                style = craneTypography.h6, // Use your theme's typography
+                color = Colors.onSurface, 
+                style = Typography.h6, 
                 modifier = Modifier.constrainAs(cardType) {
-                    top.linkTo(parent.top, margin = 16.dp)
-                    start.linkTo(parent.start, margin = 16.dp)
+                    top.linkTo(parent.top, margin = Space.spaceMedium)
+                    start.linkTo(parent.start, margin = Space.spaceMedium)
                 }
             )
 
             Text(
                 text = cardInfo.cardNumber, // Masked number for privacy
-                color = Color.White,
-                style = craneTypography.h6, // Use your theme's typography
+                color = Colors.onSurface, 
+                style = Typography.h6, 
                 modifier = Modifier.constrainAs(cardNumber) {
-                    top.linkTo(cardType.bottom, margin = 8.dp)
-                    end.linkTo(parent.end, margin = 16.dp)
+                    top.linkTo(cardType.bottom, margin = Space.spaceSmall)
+                    end.linkTo(parent.end, margin = Space.spaceMedium)
                 }
             )
 
             Text(
-                text = "Due Date ${cardInfo.dueDate}",
-                color = Color.White,
-                style = craneTypography.subtitle1, // Use your theme's typography
+                text = stringResource(R.string.due_date, cardInfo.dueDate),
+                color = Colors.onSurface, 
+                style = Typography.subtitle1, 
                 modifier = Modifier.constrainAs(dueDate) {
-                    top.linkTo(cardNumber.bottom, margin = 8.dp)
-                    start.linkTo(parent.start, margin = 16.dp)
+                    top.linkTo(cardNumber.bottom, margin = Space.spaceSmall)
+                    start.linkTo(parent.start, margin = Space.spaceMedium)
                 }
             )
 
             Text(
                 text = cardInfo.amountDue,
-                color = Color.White,
-                style = craneTypography.h4.copy(fontSize = 30.sp, fontWeight = FontWeight.Bold), // Use your theme's typography
+                color = Colors.onSurface, 
+                style = Typography.h4.copy(fontWeight = FontWeight.Bold),
                 modifier = Modifier.constrainAs(amount) {
-                    top.linkTo(dueDate.bottom, margin = 8.dp)
-                    start.linkTo(parent.start, margin = 16.dp)
+                    top.linkTo(dueDate.bottom, margin = Space.spaceSmall)
+                    start.linkTo(parent.start, margin = Space.spaceMedium)
                 }
             )
 
             Button(
                 onClick = { /* Handle the payment action */ },
                 modifier = Modifier.constrainAs(payButton) {
-                    bottom.linkTo(parent.bottom, margin = 16.dp)
-                    end.linkTo(parent.end, margin = 16.dp)
+                    bottom.linkTo(parent.bottom, margin = Space.spaceMedium)
+                    end.linkTo(parent.end, margin = Space.spaceMedium)
                 }
             ) {
                 Text(
-                    text = "PAY",
-                    style = craneTypography.button, // Use your theme's typography
-                    color = Color.White
+                    text = stringResource(R.string.pay),
+                    style = Typography.button, 
+                    color = Colors.onSurface
                 )
             }
 
             Text(
                 text = cardInfo.paymentStatus,
-                color = Color.White,
-                style = craneTypography.overline, // Use your theme's typography
+                color = Colors.onSurface, 
+                style = Typography.overline, 
                 modifier = Modifier.constrainAs(paymentStatus) {
-                    start.linkTo(parent.start, margin = 16.dp)
-                    bottom.linkTo(payButton.top, margin = 8.dp)
+                    start.linkTo(parent.start, margin = Space.spaceMedium)
+                    bottom.linkTo(payButton.top, margin = Space.spaceSmall)
                 }
             )
         }
     }
-}
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt
index d445fef..a3c5992 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/HomeHeaderComposable.kt
@@ -12,8 +12,8 @@ import androidx.constraintlayout.compose.ConstraintLayout
 import com.ouday.cryptowalletsample.R
 import com.ouday.cryptowalletsample.ui.theme.Size
 import com.ouday.cryptowalletsample.ui.theme.Space
-import com.ouday.cryptowalletsample.ui.theme.craneColors
-import com.ouday.cryptowalletsample.ui.theme.craneTypography
+import com.ouday.cryptowalletsample.ui.theme.Colors
+import com.ouday.cryptowalletsample.ui.theme.Typography
 
 @Composable
 fun HomeHeaderComposable(username: String, modifier: Modifier = Modifier) {
@@ -67,7 +67,7 @@ fun UsernameText(username: String, modifier: Modifier) {
     Text(
         text = username,
         modifier = modifier.padding(start = Space.spaceMedium),
-        style = craneTypography.h5.copy(color = craneColors.primary)
+        style = Typography.h5.copy(color = Colors.primary)
     )
 }
 
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt
index fc53ea3..64bea6b 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/home/components/LoanCardComposable.kt
@@ -6,9 +6,7 @@ import androidx.compose.foundation.layout.Box
 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.shape.RoundedCornerShape
 import androidx.compose.material.LinearProgressIndicator
 import androidx.compose.material.MaterialTheme
@@ -16,7 +14,6 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -25,8 +22,6 @@ import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.ConstraintLayoutScope
 import com.ouday.cryptowalletsample.R
 import com.ouday.cryptowalletsample.subscriptions.data.model.Subscription
-import com.ouday.cryptowalletsample.ui.theme.Size
-import com.ouday.cryptowalletsample.ui.theme.craneColors
 
 @Composable
 fun LoanCardComposable(
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt
index 4f2a1c6..02287b4 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/home/ui/view/HomeScreen.kt
@@ -1,6 +1,5 @@
 package com.ouday.cryptowalletsample.home.ui.view
 
-import CreditCardComposable
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -32,12 +31,13 @@ import com.ouday.cryptowalletsample.common.FlowState
 import com.ouday.cryptowalletsample.common.HandleFlowState
 import com.ouday.cryptowalletsample.creditcards.data.model.CreditCardInfo
 import com.ouday.cryptowalletsample.home.components.BillOptionItem
+import com.ouday.cryptowalletsample.home.components.CreditCardComposable
 import com.ouday.cryptowalletsample.home.components.LoanCardComposable
 import com.ouday.cryptowalletsample.home.ui.viewmodel.HomeViewModel
 import com.ouday.cryptowalletsample.ui.theme.Size
 import com.ouday.cryptowalletsample.ui.theme.Space
-import com.ouday.cryptowalletsample.ui.theme.craneColors
-import com.ouday.cryptowalletsample.ui.theme.craneTypography
+import com.ouday.cryptowalletsample.ui.theme.Colors
+import com.ouday.cryptowalletsample.ui.theme.Typography
 
 @Composable
 fun HomeScreen(modifier: Modifier = Modifier, viewModel: HomeViewModel = hiltViewModel()) {
@@ -53,7 +53,7 @@ fun HomeScreen(modifier: Modifier = Modifier, viewModel: HomeViewModel = hiltVie
             Spacer(modifier = Modifier.height(Space.spaceMedium))
             Text(
                 text = "Bill Payments",
-                style = craneTypography.subtitle1,
+                style = Typography.subtitle1,
                 modifier = Modifier.padding(start = Space.spaceLarge)
             )
             Spacer(modifier = Modifier.height(Space.spaceSmall))
@@ -61,7 +61,7 @@ fun HomeScreen(modifier: Modifier = Modifier, viewModel: HomeViewModel = hiltVie
             Spacer(modifier = Modifier.height(Space.spaceSmall))
             Text(
                 text = "Active Loans",
-                style = craneTypography.subtitle1,
+                style = Typography.subtitle1,
                 modifier = Modifier.padding(start = Space.spaceLarge)
             )
             Spacer(modifier = Modifier.height(Space.spaceSmall))
@@ -91,7 +91,7 @@ fun Subscriptions(viewModel: HomeViewModel = hiltViewModel()) {
                                 .width(Size.size2XMax)
                                 .height(Size.sizeMax)
                                 .clip(RoundedCornerShape(Size.sizeSmall))
-                                .background(craneColors.primary.copy(alpha = 0.2f))
+                                .background(Colors.primary.copy(alpha = 0.2f))
                                 .padding(Size.sizeMedium)
                         )
                     }
@@ -175,8 +175,8 @@ fun CreditCardsPager(creditCards: List<CreditCardInfo>) {
         HorizontalPagerIndicator(
             pagerState = pagerState,
             modifier = Modifier.align(Alignment.CenterHorizontally),
-            activeColor = craneColors.primary,
-            inactiveColor = craneColors.primary.copy(alpha = 0.6f)
+            activeColor = Colors.primary,
+            inactiveColor = Colors.primary.copy(alpha = 0.6f)
         )
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt b/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt
index 9775f37..7527e40 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/subscriptions/ui/view/SubscriptionScreen.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Column
 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.lazy.LazyColumn
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
@@ -23,7 +22,7 @@ import com.ouday.cryptowalletsample.subscriptions.data.model.Subscription
 import com.ouday.cryptowalletsample.subscriptions.ui.viewmodel.SubscriptionViewModel
 import com.ouday.cryptowalletsample.ui.theme.Size
 import com.ouday.cryptowalletsample.ui.theme.Space
-import com.ouday.cryptowalletsample.ui.theme.craneColors
+import com.ouday.cryptowalletsample.ui.theme.Colors
 
 @Composable
 fun SubscriptionScreen(modifier: Modifier = Modifier, viewModel: SubscriptionViewModel = hiltViewModel()) {
@@ -60,7 +59,7 @@ fun SubscriptionsList(subscriptions: List<Subscription>, modifier: Modifier = Mo
                             .fillMaxWidth()
                             .height(Size.sizeMax)
                             .clip(RoundedCornerShape(Size.sizeSmall))
-                            .background(craneColors.primary.copy(alpha = 0.2f))
+                            .background(Colors.primary.copy(alpha = 0.2f))
                             .padding(Size.sizeMedium)
                     )
                 }
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt
index a9401f8..2f81929 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/CryptoWalletSampleTheme.kt
@@ -1,6 +1,5 @@
 package com.ouday.cryptowalletsample.ui.theme
 
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Colors
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.lightColors
@@ -9,22 +8,15 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 
 val Colors.success: Color
-    get() = Color(0xFF5DB83B)
-
-val craneColors = lightColors(
-    primary = Color(0xFF5D1049),
-    primaryVariant = Color(0x2D5D1049),
-    secondary = Color(0xFFE30425),
-    surface = Color(0x65720D5D),
-    onSurface = Color(0xFF200217),
-    onBackground = Color(0xFF000000)
-)
+    get() = Color(0xFF4CAF50) // Example: Changed to Material Green
 
-val BottomSheetShape = RoundedCornerShape(
-    topStart = 20.dp,
-    topEnd = 20.dp,
-    bottomStart = 0.dp,
-    bottomEnd = 0.dp
+val Colors = lightColors(
+    primary = Color(0xFF6200EE), // Example: Changed to Material Deep Purple
+    primaryVariant = Color(0xFF3700B3), // Example: Changed to a darker shade of Deep Purple
+    secondary = Color(0xFF03DAC6), // Example: Changed to Material Teal
+    surface = Color(0xFF121212), // Example: Changed to a dark surface color
+    onSurface = Color(0xFFFFFFFF), // Example: Changed to White for contrast on dark surface
+    onBackground = Color(0xFF000000) // Example: Black for background
 )
 
 object Size {
@@ -54,9 +46,24 @@ object Space {
     val spaceMax = 64.dp
 }
 
+object MaterialCornerRadius {
+    val radiusExtraSmall = 4.dp
+    val radiusSmall = 8.dp
+    val radiusMedium = 12.dp
+    val radiusLarge = 16.dp
+    val radiusExtraLarge = 20.dp
+}
+
+object MaterialElevation {
+    val elevationLevel1 = 2.dp // For components like buttons
+    val elevationLevel2 = 4.dp // For small components like cards
+    val elevationLevel3 = 6.dp // For medium components
+    val elevationLevel4 = 8.dp // For large components
+}
+
 @Composable
 fun CryptoWalletSampleTheme(content: @Composable () -> Unit) {
-    MaterialTheme(colors = craneColors, typography = craneTypography) {
+    MaterialTheme(colors = Colors, typography = Typography) {
         content()
     }
 }
diff --git a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt
index dfc9c0e..c58beb2 100644
--- a/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt
+++ b/app/src/main/java/com/ouday/cryptowalletsample/ui/theme/Typography.kt
@@ -37,7 +37,7 @@ val captionTextStyle = TextStyle(
     fontSize = 16.sp
 )
 
-val craneTypography = Typography(
+val Typography = Typography(
     h1 = TextStyle(
         fontFamily = craneFontFamily,
         fontWeight = FontWeight.W300,
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 083b15a..e8b59b7 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -1,3 +1,9 @@
 <resources>
     <string name="app_name">Crypto Wallet Sample</string>
+    <string name="bill_date">Date: %1$s</string>
+    <string name="bill_amount">Amount: %1$s</string>
+    <string name="paid">Paid</string>
+    <string name="not_paid">Not Paid</string>
+    <string name="due_date">Due Date %1$s</string>
+    <string name="pay">PAY</string>
 </resources>
\ No newline at end of file