diff --git a/backend/backend/__pycache__/settings.cpython-310.pyc b/backend/backend/__pycache__/settings.cpython-310.pyc
index dba1f24..8254b89 100644
Binary files a/backend/backend/__pycache__/settings.cpython-310.pyc and b/backend/backend/__pycache__/settings.cpython-310.pyc differ
diff --git a/backend/backend/__pycache__/urls.cpython-310.pyc b/backend/backend/__pycache__/urls.cpython-310.pyc
index e223a4d..8af5a0f 100644
Binary files a/backend/backend/__pycache__/urls.cpython-310.pyc and b/backend/backend/__pycache__/urls.cpython-310.pyc differ
diff --git a/backend/backend/api/__pycache__/urls.cpython-310.pyc b/backend/backend/api/__pycache__/urls.cpython-310.pyc
index cb9d521..adee24c 100644
Binary files a/backend/backend/api/__pycache__/urls.cpython-310.pyc and b/backend/backend/api/__pycache__/urls.cpython-310.pyc differ
diff --git a/backend/backend/api/urls.py b/backend/backend/api/urls.py
index 2e9bcbe..9bbb012 100644
--- a/backend/backend/api/urls.py
+++ b/backend/backend/api/urls.py
@@ -1,10 +1,12 @@
 from rest_framework.routers import DefaultRouter
 from journaling.api.urls import journal_router
+from habits.api.urls import habit_router
 from django.urls import path, include
 
 
 router = DefaultRouter()
 router.registry.extend(journal_router.registry)
+router.registry.extend(habit_router.registry)
 
 urlpatterns = [
     path('', include(router.urls)),
diff --git a/backend/backend/settings.py b/backend/backend/settings.py
index eddce99..d519688 100644
--- a/backend/backend/settings.py
+++ b/backend/backend/settings.py
@@ -11,10 +11,19 @@
 """
 
 from pathlib import Path
+import json
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
+# Config File for the entire app
+config_file = BASE_DIR.parent / "config.json"
+
+with config_file.open() as json_file:
+    config_data = json.load(json_file)
+    HOST_ADDRESS = config_data.get('HOST_ADDRESS', 'localhost')
+
+
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
@@ -38,13 +47,14 @@
     'rest_framework',
     'corsheaders',
     'journaling.apps.JournalingConfig',
+    'habits.apps.HabitsConfig',
 ]
 
 CORS_ALLOWED_ORIGINS = [
     'http://localhost:5173',
     'http://localhost:8081',
-    'exp://192.168.254.26:8081',
-    'http://192.168.254.26:8081',
+    f'exp://{HOST_ADDRESS}:8081',
+    f'http://{HOST_ADDRESS}:8081',
     ]
 
 MIDDLEWARE = [
diff --git a/backend/backend/urls.py b/backend/backend/urls.py
index 5ec74d9..3dffe64 100644
--- a/backend/backend/urls.py
+++ b/backend/backend/urls.py
@@ -19,5 +19,6 @@
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('api/', include('journaling.api.urls')),
+    path('api/', include('backend.api.urls')),
+    path('api/', include('journaling.api.urls'))
 ]
diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
index 275f3a4..6076570 100644
Binary files a/backend/db.sqlite3 and b/backend/db.sqlite3 differ
diff --git a/backend/habits/__init__.py b/backend/habits/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/habits/admin.py b/backend/habits/admin.py
new file mode 100644
index 0000000..40ffc01
--- /dev/null
+++ b/backend/habits/admin.py
@@ -0,0 +1,5 @@
+from django.contrib import admin
+from .models import Habit
+
+# Register your models here.
+admin.site.register(Habit)
\ No newline at end of file
diff --git a/backend/habits/api/serializers.py b/backend/habits/api/serializers.py
new file mode 100644
index 0000000..807b5f4
--- /dev/null
+++ b/backend/habits/api/serializers.py
@@ -0,0 +1,13 @@
+from rest_framework import serializers
+from ..models import Habit
+
+class HabitSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Habit
+        fields = ['id', 'name', 'description', 'good_habit', 'date_started', 'date_last_checked']
+
+
+class HabitCreateUpdateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Habit
+        fields = ['name', 'description', 'good_habit']
\ No newline at end of file
diff --git a/backend/habits/api/urls.py b/backend/habits/api/urls.py
new file mode 100644
index 0000000..42cc8ca
--- /dev/null
+++ b/backend/habits/api/urls.py
@@ -0,0 +1,10 @@
+from django.urls import path, include
+from rest_framework.routers import DefaultRouter
+from .views import HabitView
+
+habit_router = DefaultRouter()
+habit_router.register(r'habit', HabitView)
+
+urlpatterns = [
+    path('', include(habit_router.urls)),
+]
diff --git a/backend/habits/api/views.py b/backend/habits/api/views.py
new file mode 100644
index 0000000..6f162f1
--- /dev/null
+++ b/backend/habits/api/views.py
@@ -0,0 +1,18 @@
+from rest_framework import viewsets, status
+from ..models import Habit
+from .serializers import HabitSerializer, HabitCreateUpdateSerializer
+from rest_framework.response import Response
+
+# Create your views here.
+
+class HabitView(viewsets.ModelViewSet):
+    queryset = Habit.objects.all()
+
+    def get_serializer_class(self):
+        if self.action in ['create', 'update', 'partial_update']:
+            return HabitCreateUpdateSerializer
+        else:
+            return HabitSerializer
+
+    def create(self, request, *args, **kwargs):
+        return super().create(request, *args, **kwargs)
diff --git a/backend/habits/apps.py b/backend/habits/apps.py
new file mode 100644
index 0000000..0017368
--- /dev/null
+++ b/backend/habits/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HabitsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'habits'
diff --git a/backend/habits/migrations/0001_initial.py b/backend/habits/migrations/0001_initial.py
new file mode 100644
index 0000000..db9daa5
--- /dev/null
+++ b/backend/habits/migrations/0001_initial.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2023-12-13 18:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Habit',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=25)),
+                ('description', models.CharField(max_length=125)),
+                ('good_habit', models.BooleanField(default=True)),
+                ('date_started', models.DateTimeField(auto_now_add=True)),
+                ('date_last_checked', models.DateTimeField(auto_now=True)),
+            ],
+        ),
+    ]
diff --git a/backend/habits/migrations/__init__.py b/backend/habits/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/habits/models.py b/backend/habits/models.py
new file mode 100644
index 0000000..4134a8a
--- /dev/null
+++ b/backend/habits/models.py
@@ -0,0 +1,11 @@
+from django.db import models
+
+# Create your models here.
+
+
+class Habit(models.Model):
+    name = models.CharField(max_length = 25)
+    description = models.CharField(max_length = 125)
+    good_habit = models.BooleanField(default = True)
+    date_started = models.DateTimeField(auto_now_add=True)
+    date_last_checked = models.DateTimeField(auto_now=True)
\ No newline at end of file
diff --git a/config.json b/config.json
new file mode 100644
index 0000000..efe4883
--- /dev/null
+++ b/config.json
@@ -0,0 +1,4 @@
+
+{
+    "HOST_ADDRESS": "<YOUR_ADDRESS_HERE>"
+}
\ No newline at end of file
diff --git a/frontendMobile/src/Api/apiEndpoints.js b/frontendMobile/src/Api/apiEndpoints.js
index 31a0038..d39737c 100644
--- a/frontendMobile/src/Api/apiEndpoints.js
+++ b/frontendMobile/src/Api/apiEndpoints.js
@@ -1,7 +1,8 @@
 // This is where all the API endpoints are handled (using a REST framework)
 // I made sure to put them all in one file to make frontend dev and backend dev communication a lot easier!
 
-DOMAIN = 'http://192.168.254.26:8000' // Put the server to your backend here!
+HOST = "<YOUR_ADDRESS_HERE>"  // Put the IP here!
+DOMAIN = `http://${HOST}:8000/`
 
 const endpoints = {
     getJournal: `${DOMAIN}/api/journal`,
@@ -10,6 +11,8 @@ const endpoints = {
     journal: `${DOMAIN}/api/create_journal/`,
     journalPage: `${DOMAIN}/api/create_journal_page/`,
 
+    getHabit: `${DOMAIN}/api/habit/`,
+
     postApiResponse(endpoint, data, handleOk = () => {}, handleError = () => {}) {
         console.log("Sender's Data: ", data)
 
@@ -80,4 +83,4 @@ const endpoints = {
 
 };
 
-export default endpoints;
\ No newline at end of file
+export default endpoints;
diff --git a/frontendMobile/src/Components/Habits.js b/frontendMobile/src/Components/Habits.js
new file mode 100644
index 0000000..c288009
--- /dev/null
+++ b/frontendMobile/src/Components/Habits.js
@@ -0,0 +1,48 @@
+import React, { useState, useCallback } from 'react';
+import { View, ScrollView, Text, Button, StyleSheet } from 'react-native';
+import { mainStyle } from '../Styles/Styles';
+import { useFocusEffect } from '@react-navigation/native'
+import dateTimeFormat from '../Utils/DateTimeFormat';
+import endpoints from '../Api/apiEndpoints';
+
+const s = StyleSheet.create(mainStyle);
+
+const Habits = ({sortBy, navigation}) => {
+    const getHabits = endpoints.getHabit;
+
+    const [habits, setHabits] = useState([]);
+    useFocusEffect(useCallback(() => {endpoints.getAPIResponse(getHabits, setHabits)}, []));
+
+    const sortedHabits = habits.slice().sort(sortBy);
+
+    const controlStreak = (goodHabit) => {
+        if (goodHabit) {
+            console.log("Habit is good!");
+        } else {
+            console.log("Habit is bad!");
+        }
+    }
+
+    return (
+        <ScrollView>
+        {sortedHabits.map((habit) => (
+            <View 
+                key={habit.id} 
+                style={s.journalView.container}
+            >
+                <Text style={s.journalView.type}>{habit.name}</Text>
+                <View style={s.horizontalLine} />
+                <Text>{habit.description}</Text>
+                <Text>Streak: (coming soon)</Text>
+                <Button 
+                    style={ habit.good_habit ? s.journal.button : s.buttonText } 
+                    title={ habit.good_habit ? 'Complete' : 'Relapse' }
+                    onPress={() => controlStreak(habit.good_habit)}
+                />
+            </View>
+        ))}
+        </ScrollView>
+    )
+}
+
+export default Habits;
\ No newline at end of file
diff --git a/frontendMobile/src/Navigators/HomeStackNavigator.js b/frontendMobile/src/Navigators/HomeStackNavigator.js
index 275133f..c986b29 100644
--- a/frontendMobile/src/Navigators/HomeStackNavigator.js
+++ b/frontendMobile/src/Navigators/HomeStackNavigator.js
@@ -3,6 +3,7 @@ import JournalingScreen from '../Screens/Journaling/JournalingScreen';
 import ViewJournalsScreen from '../Screens/Journaling/ViewJournalsScreen';
 import ViewPagesScreen from '../Screens/Journaling/ViewPagesScreen';
 import SaveJournalingScreen from '../Screens/Journaling/SaveJournalScreen';
+import CreateHabit from '../Screens/Habits/CreateHabit';
 import { createStackNavigator } from '@react-navigation/stack'
 
 const Nav = createStackNavigator();
@@ -19,6 +20,7 @@ const HomeStackNavigator = ({navigation}) => {
             <Nav.Screen name="Save Journal" component={SaveJournalingScreen} />
             <Nav.Screen name="View Journals" component={ViewJournalsScreen} />
             <Nav.Screen name="My Journal" component={ViewPagesScreen} />
+            <Nav.Screen name="Create Habit" component={CreateHabit} />
         </Nav.Navigator> 
     )
 }
diff --git a/frontendMobile/src/Screens/Habits/CreateHabit.js b/frontendMobile/src/Screens/Habits/CreateHabit.js
new file mode 100644
index 0000000..8dd51f8
--- /dev/null
+++ b/frontendMobile/src/Screens/Habits/CreateHabit.js
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { View, ScrollView, Button, StyleSheet, TextInput, Text, TouchableOpacity } from 'react-native';
+import { mainStyle } from '../../Styles/Styles';
+import endpoints from '../../Api/apiEndpoints';
+
+const s = StyleSheet.create(mainStyle);
+
+const CreateHabit = ({navigation}) => {
+    const [error, setError] = useState('')
+    const [goodHabit, setGoodHabit] = useState(false)
+
+    const [habitData, setHabitData] = useState({
+        name: '',
+        description: '',
+        good_habit: true,
+    });
+
+    const handleChange = (name, value) => {
+        setHabitData({
+            ...habitData,
+            [name]: value
+        });
+    };
+
+    const handlingPost = {
+        handleOk: () => {
+            setError("Successfully saved habit!");
+            navigation.navigate("Home", error);
+        },
+        handleError: () => {
+            setError("An error has occured while saving your habit!");
+        },
+    }
+    const handleSubmit = () => {
+        const habit = endpoints.getHabit;
+        endpoints.postApiResponse(habit, habitData, handlingPost.handleOk, handlingPost.handleError)
+    }
+
+    return (
+        <ScrollView>
+            <View style={s.container}>
+                <Text>{error}</Text>
+                <TextInput
+                    placeholder="Name"
+                    value={habitData.prompt}
+                    onChangeText={(text) => handleChange('name', text)} 
+                />
+                <TextInput
+                    placeholder="Description"
+                    value={habitData.entry}
+                    multiline
+                    onChangeText={(text) => handleChange('description', text)} 
+                />
+                <Button 
+                    title={goodHabit ? 'Good' : 'Bad'}
+                    onPress={() => setGoodHabit(!goodHabit)}
+                />
+                <TouchableOpacity style={s.journal.submitButton} onPress={handleSubmit}>
+                    <Text style={s.buttonText}>Submit</Text>
+                </TouchableOpacity>
+            </View>
+        </ScrollView>
+    )
+}
+
+export default CreateHabit;
\ No newline at end of file
diff --git a/frontendMobile/src/Screens/HomeScreen.js b/frontendMobile/src/Screens/HomeScreen.js
index b905889..91d97fc 100644
--- a/frontendMobile/src/Screens/HomeScreen.js
+++ b/frontendMobile/src/Screens/HomeScreen.js
@@ -2,12 +2,22 @@ import React, { useState, useEffect } from 'react';
 import { StyleSheet, Animated, Easing, Text, View, TouchableOpacity } from 'react-native';
 import { mainStyle } from '../Styles/Styles';
 import JournalingChoices from '../Components/JournalingChoices';
+import Habits from '../Components/Habits';
+import dateTimeFormat from '../Utils/DateTimeFormat';
 
 
 const s = StyleSheet.create(mainStyle);
 
 export default function HomeScreen({navigation}) {
 
+  const [currentTime, setCurrentTime] = useState(new Date());
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, []);
+
   const [journalChoicesVisible, setJournalChoicesVisible] = useState(false)
   const openJournalChoices = () => setJournalChoicesVisible(true);
   const closeJournalChoices = () => setJournalChoicesVisible(false);
@@ -35,6 +45,7 @@ export default function HomeScreen({navigation}) {
   return (
     <Animated.View style={[s.container, {opacity: fade}]}>
         <Text style={s.text}>This is the Home Page!</Text>
+        <Text>{dateTimeFormat(currentTime)}</Text>
         <View style={s.row}>
           <TouchableOpacity style={s.button} onPress={openJournalChoices}>
             <Text style={s.buttonText}>Start Journal</Text>
@@ -44,8 +55,20 @@ export default function HomeScreen({navigation}) {
           </TouchableOpacity>
         </View>
         <View style={s.horizontalLine} />
-        <View testID='Habits'>
-          <Text>-- Habits Go Here --</Text>
+        <View style={s.myHabits.tab}>
+          <View style={s.row}>
+            <Text style={s.myHabits.text}>My Habits</Text>
+          </View>
+          <View style={s.row}>
+            <TouchableOpacity style={s.myHabits.addButton}
+              onPress={() => navigation.navigate("Create Habit")}
+            >
+              <Text style={s.myHabits.buttonText}>+</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={s.column}> 
+            <Habits sortBy={(a, b) => 0} />
         </View>
         <View style={s.horizontalLine} />
       <JournalingChoices visible={journalChoicesVisible}
diff --git a/frontendMobile/src/Styles/Styles.js b/frontendMobile/src/Styles/Styles.js
index b5ae5ea..fa46157 100644
--- a/frontendMobile/src/Styles/Styles.js
+++ b/frontendMobile/src/Styles/Styles.js
@@ -1,8 +1,102 @@
 // This is where the styling is located (For UI/UX designers)
 // P.S. In the future, users will customize their own app design.
 
-const lightModeStyle = {}
-const darkModeStyle = {}
+const lightModeComponents = {
+  mainColor: 'white',
+  contentColor: 'black',
+  borderColor: 'grey',
+  textColor: 'black'
+}
+
+const darkModeComponents = {
+  mainColor: 'black',
+  contentColor: 'grey',
+  borderColor: 'white',
+  textColor: 'white'
+}
+
+const createStyle = (mode) => {
+  return {
+    container: {
+      flex: 1,
+      backgroundColor: mode.mainColor,
+      alignItems: 'center',
+    },
+    text: {
+      fontSize: 45,
+      textAlign: 'center',
+      textColor: mode.textColor
+    },
+    horizontalLine: {
+      height: 1,
+      backgroundColor: mode.textColor,
+    },
+    column: {
+      flexDirection: 'column',
+      flexBasis: '33.33%',
+      alignItems: 'center',
+    },
+    row: {
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+    },
+    button: {
+      backgroundColor: mode.mainColor,
+      paddingVertical: 15,
+      paddingHorizontal: 20,
+      borderRadius: 16,
+      marginVertical: 10,
+    },
+    buttonText: {
+    },
+    backButton: {
+    },
+    bottomTab: {
+    },
+    topTab: {
+    },
+    journalChoices: {
+      container: {
+      },
+      row: {
+      },
+      cell: {
+      },
+      journalButton: {
+      },
+      closeButton: {
+      },
+    },
+    journal: {
+      container: {
+      },
+      emptyPrompt: {
+      },
+      promptText: {
+      },
+      entry: {
+      },
+      submitButton: {
+      }
+    },
+    journalView: {
+      container: {
+      },
+      type: {
+      },
+    },
+    myHabits: {
+      tab: {
+      },
+      text: {
+      },
+      addButton: {
+      },
+      buttonText: {
+      }
+    }  
+  }
+};
 
 export const mainStyle = {
     container: {
@@ -10,6 +104,10 @@ export const mainStyle = {
       backgroundColor: '#fff',
       alignItems: 'center',
     },
+    text: {
+      fontSize: 45,
+      textAlign: 'center',
+    },
     horizontalLine: {
       height: 1,
       backgroundColor: 'black',
@@ -84,10 +182,6 @@ export const mainStyle = {
         alignSelf: 'center',
       },
     },
-    text: {
-      fontSize: 45,
-      textAlign: 'center',
-    },
     journal: {
       container: {
         flex: 1,
@@ -136,4 +230,31 @@ export const mainStyle = {
         textAlign: 'center',
       },
     },
-}
+    myHabits: {
+      tab: {
+        flex: 0.4,
+        flexDirection: 'row',
+        height: 10,
+      },
+      text: {
+        textAlign: 'left',
+        fontSize: 50,
+      },
+      addButton: {
+        backgroundColor: 'black',
+        borderColor: '#ccc',
+        borderWidth: '1px',
+        width: 50, 
+        height: 50, 
+        borderRadius: 25,
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'right',
+      },
+      buttonText: {
+        color: 'white',
+        fontSize: 45,
+        textAlign: 'center',
+      }
+    }
+};