diff --git a/components/home/userSettings/Setting.tsx b/components/home/Setting.tsx
similarity index 85%
rename from components/home/userSettings/Setting.tsx
rename to components/home/Setting.tsx
index 6b480d5..9089f82 100644
--- a/components/home/userSettings/Setting.tsx
+++ b/components/home/Setting.tsx
@@ -1,7 +1,7 @@
-import { View, Text, StyleSheet, Switch, SwitchProps, useColorScheme, TouchableOpacityProps, TouchableOpacity } from 'react-native'
-import React from 'react'
-import { SIZES } from '../../../constants/theme'
-import { useTheme } from '../../../app/contexts/ThemeContext';
+import React from 'react';
+import { StyleSheet, Switch, SwitchProps, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+import { SIZES } from '../../constants/theme';
 
 interface ToggleSettingProps extends SwitchProps {
   settingsTitle: string;
diff --git a/components/home/Welcome/Welcome.tsx b/components/home/Welcome.tsx
similarity index 88%
rename from components/home/Welcome/Welcome.tsx
rename to components/home/Welcome.tsx
index 4c766b1..dd871f4 100644
--- a/components/home/Welcome/Welcome.tsx
+++ b/components/home/Welcome.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Image, Text, View, ViewProps } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
-import { MARGINS, SIZES } from '../../../constants/theme'
-import { useTheme } from '../../../app/contexts/ThemeContext'
+import { MARGINS, SIZES } from '../../constants/theme'
+import { useThemeColor } from '../../hooks/useThemeColor'
 
 type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined}
 
@@ -28,13 +28,13 @@ function getTimeOfDay(date: Date) : string {
 
 
 export default function Welcome(props: WelcomeProps) {
-  const {colors} = useTheme()
   const date = new Date()
   const dateString = formatDate(date)
   const timeOfDay = getTimeOfDay(date)
   const onpress = props.onPress
 
-  const textcolor = colors.primaryText
+  const textcolor = useThemeColor("primaryText")
+  //const backgroundColor: string = useThemeColor("backgroundColor")
 
   return (
     <View style={{
diff --git a/components/home/expenseItem/expenseItem.tsx b/components/home/expenseItem.tsx
similarity index 73%
rename from components/home/expenseItem/expenseItem.tsx
rename to components/home/expenseItem.tsx
index c5146bd..3cac5f7 100644
--- a/components/home/expenseItem/expenseItem.tsx
+++ b/components/home/expenseItem.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
-import { SIZES } from '../../../constants/theme';
-import { useTheme } from '../../../app/contexts/ThemeContext';
-import CustomCard from "../../common/CustomCard";
-import { SimpleDate } from '../../../util/SimpleDate';
+import { SIZES } from '../../constants/theme';
+import { useThemeColor } from '../../hooks/useThemeColor';
+import CustomCard from "../common/CustomCard";
 
-type ISOdateString = string
-
-export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: ISOdateString, value : string}
+export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {
-  const {colors} = useTheme()
-  const textColor = colors.primaryText
-  const backgroundColor = colors.containerColor
-  const date: SimpleDate = new SimpleDate(new Date(itemProps.date))
+  const textColor = useThemeColor("primaryText");
+  const backgroundColor = useThemeColor("backgroundColor")
   return (
       <CustomCard>
         <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
@@ -28,7 +23,7 @@ export default function ExpenseItem(itemProps : ExpenseItemProps) {
           <Text style={{
             fontSize: SIZES.small,
             color: textColor
-          }} numberOfLines={1}>{date.format("DD.MM.YYYY")}</Text>
+          }} numberOfLines={1}>{itemProps.date}</Text>
         </View>
         <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
           <Text style={{
diff --git a/components/index.tsx b/components/index.tsx
index 61d8ef7..805d6c0 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -1,7 +1,7 @@
 //home
-import ExpenseItem from "./home/expenseItem/expenseItem"
-import Welcome from "./home/Welcome/Welcome"
-import { ToggleSetting, ButtonSetting } from "./home/userSettings/Setting"
+import { ButtonSetting, ToggleSetting } from "./home/Setting"
+import Welcome from "./home/Welcome"
+import ExpenseItem from "./home/expenseItem"
 
 //common
 import LoadingSymbol from "./common/loadingSymbol"
@@ -14,10 +14,8 @@ import CustomCard from "./common/CustomCard"
 import Input from "./login/input"
 
 export {
-  ExpenseItem, Input,
+  ButtonSetting, CustomCard, ExpenseItem, Input,
   LoadingSymbol, Plus,
-  SearchBar, Welcome,
-  ToggleSetting, CustomCard,
-  ButtonSetting
+  SearchBar, ToggleSetting, Welcome
 }
 
diff --git a/components/login/input.tsx b/components/login/input.tsx
index 75f2ea4..c6c05aa 100644
--- a/components/login/input.tsx
+++ b/components/login/input.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
 import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/TextInput/TextInput';
+import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 
 interface InputProps {
   label? : string,