diff --git a/frontend/src/pages/Admin/Profile/ProfileGroupCard.vue b/frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
new file mode 100644
index 000000000..108ce296a
--- /dev/null
+++ b/frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
@@ -0,0 +1,125 @@
+<template>
+  <StatCard icon="mdi-account-group">
+    <template v-slot:after-heading>
+      <div class="ml-auto text-right">
+        <div class="body-3 grey--text font-weight-light" v-text="$t('group.group')" />
+
+        <h3 class="display-2 font-weight-light text--primary">
+          <small> {{ currentGroup.name }} </small>
+        </h3>
+      </div>
+    </template>
+    <template v-slot:bottom>
+      <div v-if="todaysMeal">
+        <v-subheader>DINNER TONIGHT</v-subheader>
+        <MobileRecipeCard
+          :name="todaysMeal.name"
+          :slug="todaysMeal.slug"
+          :description="todaysMeal.description"
+          :rating="todaysMeal.rating"
+          :tags="true"
+        />
+      </div>
+
+      <v-subheader>USERS</v-subheader>
+      <v-divider></v-divider>
+
+      <v-virtual-scroll v-if="currentGroup.users" :items="currentGroup.users" height="260" item-height="64">
+        <template v-slot:default="{ item }">
+          <v-list-item :key="item.id">
+            <v-list-item-action>
+              <v-btn fab small depressed color="primary">
+                {{ generateInitials(item.fullName) }}
+              </v-btn>
+            </v-list-item-action>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ item.fullName }}
+              </v-list-item-title>
+            </v-list-item-content>
+            <!-- TODO: Future Profile Pages-->
+            <!-- <v-list-item-action>
+              <v-icon small>
+                mdi-open-in-new
+              </v-icon>
+            </v-list-item-action> -->
+          </v-list-item>
+
+          <v-divider></v-divider>
+        </template>
+      </v-virtual-scroll>
+    </template>
+  </StatCard>
+</template>
+
+<script>
+import StatCard from "@/components/UI/StatCard";
+import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
+import { validators } from "@/mixins/validators";
+import { initials } from "@/mixins/initials";
+import { api } from "@/api";
+export default {
+  components: {
+    StatCard,
+    MobileRecipeCard,
+  },
+  mixins: [validators, initials],
+  data() {
+    return {
+      todaysMeal: false,
+      hideImage: false,
+      passwordLoading: false,
+      password: {
+        current: "",
+        newOne: "",
+        newTwo: "",
+      },
+      showPassword: false,
+      loading: false,
+      user: {
+        fullName: "",
+        email: "",
+        group: "",
+        admin: false,
+        id: 0,
+      },
+    };
+  },
+
+  computed: {
+    userProfileImage() {
+      this.resetImage();
+      return `api/users/${this.user.id}/image`;
+    },
+    currentGroup() {
+      return this.$store.getters.getCurrentGroup;
+    },
+  },
+
+  mounted() {
+    this.getTodaysMeal();
+  },
+
+  methods: {
+    async getTodaysMeal() {
+      const response = await api.mealPlans.today();
+      this.todaysMeal = response.data;
+    },
+    generateInitials(text) {
+      const allNames = text.trim().split(" ");
+      return allNames.reduce(
+        (acc, curr, index) => {
+          if (index === 0 || index === allNames.length - 1) {
+            acc = `${acc}${curr.charAt(0).toUpperCase()}`;
+          }
+          return acc;
+        },
+        [""]
+      );
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue b/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
index 47f07d2c9..c09175ee4 100644
--- a/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
+++ b/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
@@ -35,9 +35,11 @@
           </v-btn>
         </v-btn-toggle>
       </template>
+
       <template v-slot:bottom>
         <v-virtual-scroll height="290" item-height="70" :items="availableThemes" class="mt-2">
           <template v-slot:default="{ item }">
+            <v-divider></v-divider>
             <v-list-item @click="selectedTheme = item">
               <v-list-item-avatar>
                 <v-icon large dark :color="item.colors.primary">
@@ -66,6 +68,7 @@
                 </v-btn>
               </v-list-item-action>
             </v-list-item>
+            <v-divider></v-divider>
           </template>
         </v-virtual-scroll>
         <v-divider></v-divider>
diff --git a/frontend/src/pages/Admin/Profile/ThemeCard.vue b/frontend/src/pages/Admin/Profile/ThemeCard.vue
deleted file mode 100644
index e89883974..000000000
--- a/frontend/src/pages/Admin/Profile/ThemeCard.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-  <div>
-    <StatCard icon="mdi-format-color-fill" :color="color">
-      <template v-slot:after-heading>
-        <div class="ml-auto text-right">
-          <div class="body-3 grey--text font-weight-light" v-text="$t('general.themes')" />
-
-          <h3 class="display-2 font-weight-light text--primary">
-            <small> {{ selectedTheme.name }} </small>
-          </h3>
-        </div>
-      </template>
-
-      <template v-slot:actions>
-        <v-btn-toggle v-model="darkMode" color="primary " mandatory>
-          <v-btn small value="system">
-            <v-icon>mdi-desktop-tower-monitor</v-icon>
-            <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
-              {{ $t("settings.theme.default-to-system") }}
-            </span>
-          </v-btn>
-
-          <v-btn small value="light">
-            <v-icon>mdi-white-balance-sunny</v-icon>
-            <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
-              {{ $t("settings.theme.light") }}
-            </span>
-          </v-btn>
-
-          <v-btn small value="dark">
-            <v-icon>mdi-weather-night</v-icon>
-            <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
-              {{ $t("settings.theme.dark") }}
-            </span>
-          </v-btn>
-        </v-btn-toggle>
-      </template>
-      <template v-slot:bottom>
-        <v-virtual-scroll height="290" item-height="70" :items="availableThemes" class="mt-2">
-          <template v-slot:default="{ item }">
-            <v-list-item @click="selectedTheme = item">
-              <v-list-item-avatar>
-                <v-icon large dark :color="item.colors.primary">
-                  mdi-format-color-fill
-                </v-icon>
-              </v-list-item-avatar>
-
-              <v-list-item-content>
-                <v-list-item-title v-text="item.name"></v-list-item-title>
-
-                <v-row flex align-center class="mt-2 justify-space-around px-4 pb-2">
-                  <v-sheet
-                    class="rounded flex mx-1"
-                    v-for="(item, index) in item.colors"
-                    :key="index"
-                    :color="item"
-                    height="20"
-                  >
-                  </v-sheet>
-                </v-row>
-              </v-list-item-content>
-
-              <v-list-item-action class="ml-auto">
-                <v-btn large icon @click.stop="editTheme(item)">
-                  <v-icon color="accent">mdi-square-edit-outline</v-icon>
-                </v-btn>
-              </v-list-item-action>
-            </v-list-item>
-          </template>
-        </v-virtual-scroll>
-        <v-divider></v-divider>
-        <v-card-actions>
-          <v-spacer class="mx-2"></v-spacer>
-          <v-btn class="my-1 mb-n1" :color="color" @click="createTheme">
-            <v-icon left> mdi-plus </v-icon> {{ $t("general.create") }}
-          </v-btn>
-        </v-card-actions>
-      </template>
-    </StatCard>
-    <BaseDialog
-      :loading="loading"
-      :title="modalLabel.title"
-      title-icon="mdi-format-color-fill"
-      modal-width="700"
-      ref="themeDialog"
-      :submit-text="modalLabel.button"
-      @submit="processSubmit"
-      @delete="deleteTheme"
-    >
-      <v-card-text class="mt-3">
-        <v-text-field
-          :label="$t('settings.theme.theme-name')"
-          v-model="defaultData.name"
-          :rules="[rules.required]"
-          :append-outer-icon="jsonEditor ? 'mdi-form-select' : 'mdi-code-braces'"
-          @click:append-outer="jsonEditor = !jsonEditor"
-        ></v-text-field>
-        <v-row dense dflex wrap justify-content-center v-if="defaultData.colors && !jsonEditor">
-          <v-col cols="12" sm="6" v-for="(_, key) in defaultData.colors" :key="key">
-            <ColorPickerDialog :button-text="labels[key]" v-model="defaultData.colors[key]" />
-          </v-col>
-        </v-row>
-        <VJsoneditor @error="logError()" v-else v-model="defaultData" height="250px" :options="jsonEditorOptions" />
-      </v-card-text>
-    </BaseDialog>
-  </div>
-</template>
-
-<script>
-import VJsoneditor from "v-jsoneditor";
-import { api } from "@/api";
-import ColorPickerDialog from "@/components/FormHelpers/ColorPickerDialog";
-import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
-import StatCard from "@/components/UI/StatCard";
-export default {
-  components: { StatCard, BaseDialog, ColorPickerDialog, VJsoneditor },
-  data() {
-    return {
-      jsonEditor: true,
-      jsonEditorOptions: {
-        mode: "code",
-        search: false,
-        mainMenuBar: false,
-      },
-      availableThemes: [],
-      color: "accent",
-      newTheme: false,
-      loading: false,
-      defaultData: {
-        name: "",
-        colors: {
-          primary: "#E58325",
-          accent: "#00457A",
-          secondary: "#973542",
-          success: "#43A047",
-          info: "#4990BA",
-          warning: "#FF4081",
-          error: "#EF5350",
-        },
-      },
-      rules: {
-        required: val => !!val || this.$t("settings.theme.theme-name-is-required"),
-      },
-    };
-  },
-  computed: {
-    labels() {
-      return {
-        primary: this.$t("settings.theme.primary"),
-        secondary: this.$t("settings.theme.secondary"),
-        accent: this.$t("settings.theme.accent"),
-        success: this.$t("settings.theme.success"),
-        info: this.$t("settings.theme.info"),
-        warning: this.$t("settings.theme.warning"),
-        error: this.$t("settings.theme.error"),
-      };
-    },
-    modalLabel() {
-      if (this.newTheme) {
-        return {
-          title: this.$t("settings.add-a-new-theme"),
-          button: this.$t("general.create"),
-        };
-      } else {
-        return {
-          title: "Update Theme",
-          button: this.$t("general.update"),
-        };
-      }
-    },
-    selectedTheme: {
-      set(val) {
-        this.$store.commit("setTheme", val);
-      },
-      get() {
-        return this.$store.getters.getActiveTheme;
-      },
-    },
-    darkMode: {
-      set(val) {
-        this.$store.commit("setDarkMode", val);
-      },
-      get() {
-        return this.$store.getters.getDarkMode;
-      },
-    },
-  },
-  async mounted() {
-    await this.getAllThemes();
-  },
-  methods: {
-    async getAllThemes() {
-      this.availableThemes = await api.themes.requestAll();
-    },
-    editTheme(theme) {
-      console.log(theme);
-      this.defaultData = theme;
-      this.newTheme = false;
-      this.$refs.themeDialog.open();
-    },
-    createTheme() {
-      this.newTheme = true;
-      this.$refs.themeDialog.open();
-      console.log("Create Theme");
-    },
-    async processSubmit() {
-      if (this.newTheme) {
-        console.log("New Theme");
-        await api.themes.create(this.defaultData);
-      } else {
-        await api.themes.update(this.defaultData);
-      }
-      this.getAllThemes();
-    },
-    async deleteTheme() {
-      console.log(this.defaultData);
-      await api.themes.delete(this.defaultData.id);
-      this.getAllThemes();
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
\ No newline at end of file
diff --git a/frontend/src/pages/Admin/Profile/index.vue b/frontend/src/pages/Admin/Profile/index.vue
index 9aea25370..7f8c7a02b 100644
--- a/frontend/src/pages/Admin/Profile/index.vue
+++ b/frontend/src/pages/Admin/Profile/index.vue
@@ -3,25 +3,28 @@
     <v-row>
       <v-col cols="12" sm="12" lg="6">
         <UserCard />
+        <ProfileThemeCard class="mt-10" />
+      </v-col>
+      <v-col cols="12" sm="12" lg="6">
+        <ProfileGroupCard />
       </v-col>
-      <v-col cols="12" sm="12" lg="6"> </v-col>
     </v-row>
     <v-row class="mt-7">
-      <v-col cols="12" sm="12" lg="6">
-        <ThemeCard />
-      </v-col>
+      <v-col cols="12" sm="12" lg="6"> </v-col>
       <v-col cols="12" sm="12" lg="6"> </v-col>
     </v-row>
   </div>
 </template>
 
 <script>
-import ThemeCard from "./ThemeCard";
+import ProfileThemeCard from "./ProfileThemeCard";
+import ProfileGroupCard from "./ProfileGroupCard";
 import UserCard from "./UserCard";
 export default {
   components: {
     UserCard,
-    ThemeCard,
+    ProfileThemeCard,
+    ProfileGroupCard,
   },
 };
 </script>
diff --git a/frontend/src/routes/meal.js b/frontend/src/routes/meal.js
index f21c8595e..e79e8861b 100644
--- a/frontend/src/routes/meal.js
+++ b/frontend/src/routes/meal.js
@@ -38,7 +38,7 @@ export const mealRoutes = [
 async function todaysMealRoute() {
   const response = await api.mealPlans.today();
   if (response.status == 200 && response.data) {
-    return "/recipe/" + response.data;
+    return "/recipe/" + response.data.slug;
   } else {
     return null;
   }
diff --git a/mealie/routes/mealplans/crud.py b/mealie/routes/mealplans/crud.py
index bb2f17672..5cff2c2ab 100644
--- a/mealie/routes/mealplans/crud.py
+++ b/mealie/routes/mealplans/crud.py
@@ -75,7 +75,7 @@ def get_today(session: Session = Depends(generate_session), current_user: UserIn
     group_in_db: GroupInDB = db.groups.get(session, current_user.group, "name")
     recipe = get_todays_meal(session, group_in_db)
     if recipe:
-        return recipe.slug
+        return recipe
 
 
 @router.get("/today/image", tags=["Meal Plan"])