diff --git a/tumblr-replica/src/components/Activity/Activity.jsx b/tumblr-replica/src/components/Activity/Activity.jsx
index cc9205f2..1f600bdf 100644
--- a/tumblr-replica/src/components/Activity/Activity.jsx
+++ b/tumblr-replica/src/components/Activity/Activity.jsx
@@ -17,7 +17,6 @@ import NotificationsList from './NotificationsList';
 
 import { getBlogId, fetchBlogs, setcurrentblog } from '../../states/features/userblogs/userblogsSlice';
 
-
 /**
  * Component for show the activity for the Blog it has graph
  *
@@ -109,7 +108,7 @@ function Activity({ option }) {
   }
   console.log(Notes);
   return (
-  <div>
+    <div>
       <Grid container spacing={2}>
         <Grid item xs={10} lg={6} sx={{ marginLeft: '10%' }}>
           <Graph
diff --git a/tumblr-replica/src/components/BlogSettingsPage/BlogSettingsPage.jsx b/tumblr-replica/src/components/BlogSettingsPage/BlogSettingsPage.jsx
index 9b2df69c..86f7294e 100644
--- a/tumblr-replica/src/components/BlogSettingsPage/BlogSettingsPage.jsx
+++ b/tumblr-replica/src/components/BlogSettingsPage/BlogSettingsPage.jsx
@@ -68,7 +68,7 @@ const AccountSettingsPage = () => {
                 width: '625px',
               }}
             >
-              <Link to={'/profile/' + blog.username}>
+              <Link to={'/profile/' + blog.username} target="_blank">
                 <Box
                   component="img"
                   sx={{
@@ -251,7 +251,7 @@ const AccountSettingsPage = () => {
                     >
                       Make your likes public at:
                     </Typography>
-                    <Link to={'/liked/by/' + user.blogName}>
+                    <Link to={'/liked/by/' + user.blogName} target="_blank">
                       <Typography
                         component="h2"
                         fontSize="12px"
@@ -327,7 +327,7 @@ const AccountSettingsPage = () => {
                     >
                       Make your follows public at:
                     </Typography>
-                    <Link to={'/followed/by/' + user.blogName}>
+                    <Link to={'/followed/by/' + user.blogName} target="_blank">
                       <Typography
                         component="h2"
                         fontSize="12px"
@@ -456,6 +456,7 @@ const AccountSettingsPage = () => {
                           color: '#999999',
                           fontFamily: '"Favorit", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif',
                         }}
+                        target="_blank"
                       >
                         <Typography
                           fontSize="12px"
@@ -503,7 +504,6 @@ const AccountSettingsPage = () => {
                             }}
                             variant="outlined"
                             fullWidth
-                            autoFocus
                             disableRipple
                             disableElevation
                             style={{
@@ -613,6 +613,7 @@ const AccountSettingsPage = () => {
                           color: '#999999',
                           fontFamily: '"Favorit", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif',
                         }}
+                        target="_blank"
                       >
                         <Typography
                           fontSize="12px"
@@ -660,7 +661,6 @@ const AccountSettingsPage = () => {
                             }}
                             variant="outlined"
                             fullWidth
-                            autoFocus
                             disableRipple
                             disableElevation
                             style={{
@@ -709,7 +709,6 @@ const AccountSettingsPage = () => {
                             }}
                             variant="outlined"
                             fullWidth
-                            autoFocus
                             disableRipple
                             disableElevation
                             style={{
diff --git a/tumblr-replica/src/components/LogOutHomePage/subcomponents/ContinueWithGoogleButton/ContinueWithGoogleButton.jsx b/tumblr-replica/src/components/LogOutHomePage/subcomponents/ContinueWithGoogleButton/ContinueWithGoogleButton.jsx
index 8e63da55..1a61a900 100644
--- a/tumblr-replica/src/components/LogOutHomePage/subcomponents/ContinueWithGoogleButton/ContinueWithGoogleButton.jsx
+++ b/tumblr-replica/src/components/LogOutHomePage/subcomponents/ContinueWithGoogleButton/ContinueWithGoogleButton.jsx
@@ -57,6 +57,7 @@ const ContinueWithGoogleButton = () => {
           sx={{ spacing: 8, mt: 1.5 }}
         >
           <Button
+            id="google-login-button"
             onClick={renderProps.onClick}
             disabled={renderProps.disabled}
             fullWidth
diff --git a/tumblr-replica/src/components/LogOutHomePage/subcomponents/HereIsWhatIsTrendingButton/HereIsWhatIsTrendingButton.jsx b/tumblr-replica/src/components/LogOutHomePage/subcomponents/HereIsWhatIsTrendingButton/HereIsWhatIsTrendingButton.jsx
index 8d073251..38d176d7 100644
--- a/tumblr-replica/src/components/LogOutHomePage/subcomponents/HereIsWhatIsTrendingButton/HereIsWhatIsTrendingButton.jsx
+++ b/tumblr-replica/src/components/LogOutHomePage/subcomponents/HereIsWhatIsTrendingButton/HereIsWhatIsTrendingButton.jsx
@@ -17,7 +17,7 @@ const HereIsWhatIsTrendingButton = () => (
         size="large"
         font='"Favorit", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;'
         style={{
-          color: '#FFFFFF', fontWeight: 'bold', textTransform: 'none',
+          color: '#000000', fontWeight: 'bold', textTransform: 'none',
         }}
       >
         Here&apos;s what&apos;s trending
diff --git a/tumblr-replica/src/states/blogthemeslice/blogthemeAPI.js b/tumblr-replica/src/states/blogthemeslice/blogthemeAPI.js
new file mode 100644
index 00000000..91f977f5
--- /dev/null
+++ b/tumblr-replica/src/states/blogthemeslice/blogthemeAPI.js
@@ -0,0 +1,82 @@
+/* eslint-disable max-len */
+import Axios from 'axios';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { api, apiR } from '../../apis/globalAxpi';
+import { apiR as apiReal, SERVICETYPE, MOCK } from '../../apis/globalAPI';
+
+export const getBlogTheme = createAsyncThunk(
+  'blogTheme/getTheme',
+  async (blogName, { getState }) => {
+    if (SERVICETYPE === MOCK) {
+      try {
+        const response = await api.get(`blog/${blogName}/theme`);
+        return response.data.response;
+      } catch (e) {
+        throw Error(e);
+      }
+    } else {
+      try {
+        const state = getState();
+        const USERTOKEN = state.user.user.accessToken;
+        const AuthStr = `Bearer ${USERTOKEN}`;
+        const response1 = await apiR.get(`blog/info/${blogName}`, { headers: { Authorization: AuthStr } });
+        const blogInfo = response1.data.response;
+        const response = await apiR.get(`blog/${blogInfo.id}/theme`, { headers: { Authorization: AuthStr } });
+        return { theme: response.data, id: blogInfo.id };
+      } catch (e) {
+        throw Error(e);
+      }
+    }
+  },
+);
+
+export const putBlogTheme = createAsyncThunk(
+  'blogTheme/putTheme',
+  async (blogId, { getState }) => {
+    if (SERVICETYPE === MOCK) {
+      try {
+        const response = await api.put(`blog/${blogId}/theme`);
+        return response.data.response;
+      } catch (e) {
+        throw Error(e);
+      }
+    } else {
+      try {
+        const state = getState();
+        const USERTOKEN = state.user.user.accessToken;
+        const AuthStr = `Bearer ${USERTOKEN}`;
+        const body = {
+          replies_settings: state.blogSettings.settings.replies_settings,
+          color_title: state.blogTheme.theme.color_title,
+          font_title: state.blogTheme.theme.font_title,
+          title: state.blogTheme.theme.title,
+          font_weight_title: state.blogTheme.theme.font_weight_title,
+          description: state.blogTheme.theme.description,
+          background_color: state.blogTheme.theme.background_color,
+          accent_color: state.blogTheme.theme.accent_color,
+          body_font: state.blogTheme.theme.body_font,
+          header_image: state.blogTheme.theme.header_image,
+          avatar: state.blogTheme.theme.avatar,
+          avatar_shape: state.blogTheme.theme.avatar_shape,
+        };
+
+        const response = await Axios({
+          method: 'PUT',
+          url: `${apiReal}/blog/${blogId}/theme`,
+          headers: {
+            Authorization: AuthStr,
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+          },
+          data: body,
+        });
+        return response.data;
+      } catch (e) {
+        throw Error(e);
+      }
+    }
+  },
+);
+
+export const zero = 0;
+// nevermind this. otherwilse will have to use a default export.
diff --git a/tumblr-replica/src/states/blogthemeslice/blogthemeSlice.js b/tumblr-replica/src/states/blogthemeslice/blogthemeSlice.js
new file mode 100644
index 00000000..ef29b341
--- /dev/null
+++ b/tumblr-replica/src/states/blogthemeslice/blogthemeSlice.js
@@ -0,0 +1,87 @@
+/* eslint-disable no-else-return */
+import { createSlice } from '@reduxjs/toolkit';
+import { getBlogTheme, putBlogTheme } from './blogthemeAPI';
+
+const blogTheme = createSlice({
+  name: 'blogTheme',
+  initialState: {
+    theme: { },
+    // "color_title": "#000000",
+    // "font_title": "Gibson",
+    // "font_weight_title": "bold",
+    // "description": "dec",
+    // "title": "dec",
+    // "background_color": "#FFFFFF",
+    // "accent_color": "#e17e66",
+    // "body_font": "Helvetica Neue",
+    // "header_image": "www.image.com",
+    // "avatar": "www.jjj.com",
+    // "avatar_shape": "circle"
+    blogId: '',
+    status: '',
+  },
+  reducers: {
+    /**
+    * This function resets the status state
+    * @method
+    * @param {object} state The object that stores the current Status number
+    */
+    resetStatus: (state) => {
+      const s = state;
+      s.settingsStatus = '';
+    },
+    /**
+     * This function sets whether Share Likes is on or not
+     * @method
+     * @param {object} state The object that stores the current ShareLikes value
+     * @param {object} action The object containing the new ShareLikes value
+     */
+    setShareLikes: (state, action) => {
+      const s = state;
+      s.settings.share_likes = action.payload;
+    },
+  },
+
+  extraReducers: {
+    [getBlogTheme.pending]: (state) => {
+      const s = state;
+      s.isLoading = true;
+    },
+    [getBlogTheme.fulfilled]: (state, { payload }) => {
+      const s = state;
+      if (payload.theme.meta.status === '200') {
+        s.theme = payload.theme.response;
+        s.blogId = payload.id;
+        s.status = '200';
+      }
+      s.isLoading = false;
+      console.log('Blog Theme:', s.theme);
+    },
+    [getBlogTheme.rejected]: () => {
+
+    },
+    [putBlogTheme.pending]: (state) => {
+      const s = state;
+      s.isLoading = true;
+    },
+    [putBlogTheme.fulfilled]: (state, { payload }) => {
+      const s = state;
+      if (payload.meta.status === '200') {
+        s.theme = payload.response;
+      }
+      s.isLoading = false;
+    },
+    [putBlogTheme.rejected]: () => {
+
+    },
+  },
+});
+
+export const selectBlogTheme = (state) => state.blogTheme.theme;
+export const selectStatus = (state) => state.blogTheme.status;
+export const selectBlogId = (state) => state.blogTheme.blogId;
+export { getBlogTheme, putBlogTheme };
+export const {
+  resetStatus, setShareLikes,
+} = blogTheme.actions;
+export default blogTheme.reducer;
diff --git a/tumblr-replica/src/states/store.js b/tumblr-replica/src/states/store.js
index 45c3617e..73f04130 100644
--- a/tumblr-replica/src/states/store.js
+++ b/tumblr-replica/src/states/store.js
@@ -63,6 +63,7 @@ import themeReducer from './theme/themeSlice';
 import notificationsReducer from './notifications/notificationSlice';
 import searchStuffReducder from './search/searchSlice';
 import searchAutocompleteReducer from './search/autocompleteSlice';
+import blogThemeReducer from './blogthemeslice/blogthemeSlice';
 import SumbitReducer from './submit/submitAPI';
 import CreatePostReducer from './features/createpost/createpostSlice';
 
@@ -131,6 +132,7 @@ const store = configureStore({
     searchAutocomplete: searchAutocompleteReducer,
     postsubmit: SumbitReducer,
     blogSettings: blogSettingsReducer,
+    blogTheme: blogThemeReducer,
     CreatePostState: CreatePostReducer,
   },
 });